[자바스크립트] call, apply, bind

call과 apply,bind 메소드를 이용하여 this에 특정값을 가져와 보여주자.

1. call 메소드

const sangmin = { name: "Sangmin" };
const ramirez = { name: "Ramirez" };

function greet(){
  return `Hello, I'm ${this.name}!`;
}

greet();               //"Hello, I am undefined!"
greet.call(sangmin);   //"Hello, I am Sangmin!"
greet.call(ramirez);   //"Hello, I am Ramirez!"

함수를 호출하면서 call을 사용할때 매개변수에 객체이름을 적으면 해당 객체의 프로러티값이 함수에 호출 됩니다.



또한 매개변수를 여러개 적으면 그 여러개의 매개변수로 함수를 호출하게 됩니다.

function update(birthYear, occupation){
  this.birthYear = birthYear;
  this.occupation = occupation;
}
update.call(sangmin, 1991, "developer");
  //sangmin은 이제 {name: "Sangmin", birthYear:1991,occupation:"developer"} 입니다.

2. apply 메소드

apply는 call과 처리 방법은 같지만, 매개변수를 처리하는 방법이 다릅니다.
call은 매개변수를 직접 받지만, apply는 매개변수를 배열로 받습니다.

위에 call메소드를 apply메소드로 바꾸면 다음과 같습니다.

update.apply(sangmin, [1991, "developer"]);
  //sangmin은 이제 {name: "Sangmin", birthYear:1991,occupation:"developer"} 입니다.

3. bind 메소드

bind 메소드를 한 번 사용하면 함수의 this 값을 영구적으로 바꿉니다. 따라서, bind메소드를 사용하실 때에는 각별히 주의를 해야 합니다.

const updateSangmin = update.bind(sangmin);

updatesangmin(1991, "developer");
  //sangmin은 이제 {name: "Sangmin", birthYear:1991,occupation:"developer"} 입니다.
updatesangmin.call(ramirez,1972, "baseball-player");
  //sangmin은 이제 {name: "Sangmin", birthYear:1972,occupation:"baseball-player"} 입니다.

bind 메소드를 사용한 이름값만 변경되지 않은 것을 볼 수 있습니다.

참고 사이트 : MDN web docs - call메소드
참고 책 : Learning JavaScript (이서 브라운 지음, 한빛미디어)