🔎 call, apply, bind : 함수 호출 방식과 관계없이 this를 지정할 수 있음

📌 call

모든 함수에서 사용할 수 있으며, this를 특정값으로 지정할 수 있습니다.

const mike = {
  name: "Mike",
};

const tom = {
   name: "Tom",
};

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

showThisName() // 여기서 this는 window이므로, 아무것도 안 뜸
showThisName.call(mike); //Mike
//여기서 this가 mike가 된 것

1. 함수를 호출하면서 call을 사용하고, this로 사용할 객체를 넘기면,
   해당 함수가 주어진 객체의 method인 것처럼 사용할 수 있음
2. call의 첫번째 매개변수는 this로 사용된 값이고,
   매개 변수가 더 있으면 매개변수를 호출하는 함수로 전달 됨.

const mike = {
  name: "Mike",
};

const tom = {
   name: "Tom",
};

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

function upDate(birthYear, occupation){
  this.birthYear = birthYear;
  this.occupation = occupation;
};

upDate.call(mike, 1992, 'programmer');
console.log(mike); 
//{ name: "Mike", birthYear: 1992, occupation: 'programmer'}
//첫번째 매개변수: this 값, 두번째 매개 변수: 함수가 사용할 매개변수들을 순서대로 적은 것.

📌 apply

함수 매개변수를 처리하는 방법을 제외하면, call과 완전히 같습니다.
call은 일반적인 함수와 마찬가지로 매개변수를 직접 받지만,
apply는 매개변수를 배열로 받습니다.

const mike = {
  name: "Mike",
};

const tom = {
   name: "Tom",
};

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

function upDate(birthYear, occupation){
  this.birthYear = birthYear;
  this.occupation = occupation;
};

upDate.apply(mike, [1992, 'programmer']);
console.log(mike); 
//{ name: "Mike", birthYear: 1992, occupation: 'programmer'}

apply는 배열 요소를 함수 매개변수로 사용할 때 유용함!
apply는 배열을 전달하면 그 인수를 차례대로 매개변수로 사용

const nums = [3,10,1,6,4];

const minNum = Math.min(...nums);
const minNum = Math.min.call(null, ...nums);

const minNum = Math.min.apply(null, nums); //1

📌 bind

함수의 this값을 영구히 바꿀 수 있습니다.

const mike = {
  name: "Mike",
};

function upDate(birthYear, occupation){
  this.birthYear = birthYear;
  this.occupation = occupation;
};
//항상 this 값이 mike가 되게 해보자!

const updateMike = update.bind(mike); 
//이 함수는 항상 항상 this를 mike로 사용하게 함

🔗 코드 예시

const user = {
  name: "Mike",
  showName: function() {
    console.log(`hello, ${this.name}`);
  },
};

user.showName();
let fn = user.showName;
fn(); //이때 아무것도 나오지 않음, this를 잃어버린 것.

fn.call(user); //this를 사용할 user를 넣어줌, 잘나옴!
fn.apply(user);

let boundFn =fn.bind(user);

boundFn(); //hello, Mike 잘 나옴!