13. call, apply, bind

call, apply, bind

: 함수 호출 방식과 관계없이 this 지정 가능

call()

: 함수 호출 시, call을 사용하고 this로 사용할 객체를 넘기면 해당 함수가 주어진 객체의 메소드인 것 처럼 사용 가능.

• 함수.call(this객체, 호출 함수로 전달되는 매개변수) 로 사용
• 모든 함수에서 사용 가능
• this를 특정값으로 지정 가능

const j = {
  name: "Jane",
}

function showThisName(){
  console.log(this.name);
  console.log(this);
}

showThisName.call(j);
// Jane
// {name: 'Jane'}

• call의 두 번째 인자부터는 함수에 매개변수로 넘겨줄 수 있음.

// 매개변수를 받아 객체 정보를 업데이트 하는 함수
const j = {
  name: "Jane",
}

// 
function update(birthYear, job){
  this.birthYear = birthYear;
  this.job = job;
}

showThisName.call(j);
update.call(j, 2020, 'singer');

console.log(j);
// {name: 'Jane', birthYear: 2020, job: 'singer'}

apply()

: 함수 호출 시, apply를 사용하여 this로 사용할 객체 지정 가능. 단, 매개변수를 배열로 받음.

• 배열요소를 함수 매개변수로 받을 때 사용
• 함수.apply(this객체, 호출 함수로 전달할 매개변수)
• apply의 두 번째 매개변수로 배열로 전달하면 그 요소들을 차례대로 인수로 사용함.
• 두 번째 인수인 배열 하나에 전달할 값을 모두 넣어야함 (세 번째 인수로 또 다른 배열 전달 불가)

const j = {
  name: "Jane",
}

// 
function update(birthYear, job){
  this.birthYear = birthYear;
  this.job = job;
}

update.apply(j, [1994, 'teacher']);

console.log(j);
// {name: 'Jane', birthYear: 1994, job: 'teacher'}

const numbers = [2, 67, 4, 15, 100];
const min = Math.min(numbers);

console.log(min);


const numbers = [2, 67, 4, 15, 100];
// Math.min 메소드에 배열을 인수로 줄 수 없음
const min1 = Math.min(numbers);
// Math.min 메소드를 사용하기 위해서는 전개구문을 사용하여 배열을 풀어서 넣어줘야함.
const min2 = Math.min(...numbers);
// this로 사용할 객체는 무엇을 넣어도 상관없음
// 두 번째 매개변수로 배열을 전달하여 사용
const min3 = Math.min.apply(0, numbers);

console.log(min1);  // NaN
console.log(min2);  // 2
console.log(min3);  // 2

// .call() 사용
// .call()의 매개변수로 전개구문을 사용하여 배열을 풀어서 전달 
const callMin = Math.min.call("", ...numbers);
console.log(callMin);  // 2

const j = {
  name: "Jane",
}

// 
function update(birthYear, job, ...arr){
  this.birthYear = birthYear;
  this.job = job;
}

update.apply(j, [1994, 'teacher', 1, 2, 3, 4]);
console.log(j);
//{name: 'Jane', birthYear: 1994, job: 'teacher', arr: Array(4)}
/*
{
arr: (4) [1, 2, 3, 4]
birthYear: 1994
job: "teacher"
name: "Jane"
}
*/

bind()

: 함수의 this값을 고정할 수 있음

const m = {
  name: "Mike"
}

function update(birthYear, job){
  this.birthYear = birthYear;
  this.job = job;
}

const updateMike = update.bind(m);
// 새로 바인딩한 함수를 생성
// 새로 만든 함수는 this를 항상 m으로 받음

updateMike(1994, 'teacher');
console.log(m);
// {name: 'Mike', birthYear: 1994, job: 'teacher'}

//update.bind(m)(1940, 'job'); 의 형태로도 사용 가능

---

call, apply, bind 예제

const user = {
  name: '성원',
  showNm: function () {
    console.log(`hello, ${this.name}`);
  },
};

user.showNm();  // "hello, 성원"
let fn = user.showNm;
fn();  // "hello, "
// -> fn에 할당할 때 this를 잃어버림

fn.call(user);  // "hello, 성원"
fn.apply(user);  // "hello, 성원"

// bind를 사용하여 this지정
const bindFn = fn.bind(user);
console.log('---')
bindFn();  // "hello, 성원"

• fn에 함수를 할당할 때, this를 잃어버림 (??)
  • user: name 값을 fn에 함수 할당 시 따라오지 않음.

console.log(fn);
/*
function () {
  console.log(`hello, ${this.name}`);
}
*/