javascript 메서드 call, apply, bind

*call, apply, bind: 자바스크립트에서는 일반적인 방법 외에도 함수를 어디서 어떻게 호출했는지와 관계없이 this가 무엇인지 지정할 수 있음

 

*call: 모든 함수에서 사용 가능하며 this를 특정값으로 지정할 수 있음

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

call의 첫번째 매개변수는 this로 사용할 값이고 매개변수가 있으면 그 매개변수를 호출하는 함수로 전달됨

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

function showThisName(){
  console.log(this.name);
} //여기서 this는 window를 가리킴
showThisName();
showThisName.call(mike);//Mike

 

예시) 업데이트 함수

- 객체에 정보가 업데이트 됨. 첫번째 매개변수는 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, 1999, 'singer')
console.log(mike); //{name: 'Mike', birthYear: 1999, occupation: 'singer'}

 

*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, [1999, 'singer'])
console.log(mike); //{name: 'Mike', birthYear: 1999, occupation: 'singer'}
update.apply(tom, [2000, 'teacher'])
console.log(tom); //{name: 'Tom', birthYear: 2000, occupation: 'teacher'}

- 배열 요소를 함수 매개변수로 사용할 때 유용
-> ... 사용할 경우

const nums = [3,10,1,6,4];
const minNum = Math.min(...nums);
const maxNum = Math.max(...nums);

console.log(minNum); //1
console.log(maxNum); //10

-> apply 사용할 경우: 두번째 매개변수 배열로 전달하면 그 요소들을 차례대로 인수로 사용함

null은 this로 사용할 값인데 여기서는 Math.min이나 Math.max는 딱히 this값이 필요하지 않아 아무값 넣은 것

const nums = [3,10,1,6,4];
const minNum = Math.min.apply(null,nums); 
// = Math.min.apply(null, [3,10,1,6,4])
const maxNum = Math.max.apply(null,nums);
console.log(minNum); //1
console.log(maxNum); //10

◎ call도 사용 가능( ...nums로 씀)

const nums = [3,10,1,6,4];
const maxNum = Math.max.call(null,...nums);
// = Math.min.call(null, [3,10,1,6,4])
console.log(minNum); //1
console.log(maxNum); //10

*bind: 함수의 this값을 영구히 바꿀 수 있음

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

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

const upadteMike = update.bind(mike); //이 함수는 항상 mike를 this로 받음
upadteMike(1999, "singer");
console.log(mike); //{name: 'Mike', birthYear: 1999, occupation: 'singer'}

예시)

- fn을 할당할 때 this를 잃어버린 경우 값이 뜨지 않음. (메서드는 .showName 앞에 있는게 this(user)임) 호출할 때 fn만 호출하고 this가 없는 상태

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

- call을 사용해 this로 사용할 값 user를 넣음

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

-apply를 넣어도 동일

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

- bind를 이용해 새 함수 만들기

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

let boundFn = fn.bind(user);
boundFn();