#9 - Call, Apply, Bind

this를 유용하게 사용하기 위한 3가지 메소드를 알아보자

• call()
• apply()
• bind()

1. call
첫 번째 매개변수에는 각 함수의 실행문맥의 this를 특정하게 지정하는 매개변수이다. 즉 call을 써서 this를 정의해준다면 다른 객체의 파라미터나 메소드를 자기 것마냥 사용할 수 있는 것이다.

// call()
var kim = { name:"kim", first:10, second:20 }
var lee = { name:"lee", first:100, second:200 }
function sum(num) {
    return num + this.first + this.second;
}
sum.call(kim, 500); //sum을 call하는데 this값을 kim객체로 한다!

2. apply
apply() 메소드의 대표적인 용도는 arguments 객체와 같은, 유사 배열 객체에 배열 메소드를 사용하는 경우입니다. arguments 객체는 배열이 아니기 때문에 Array객체의 slice() 같은 배열의 메소드를 사용할 수 없으나 apply() 메소드를 이용하면 가능합니다.

// apply()
function convertArgsToArray() {
  console.log(arguments);
  // arguments 유사배열 겍체를 this로 사용
  // slice: 배열의 특정 부분에 대한 복사본을 생성한다.
  var arr = Array.prototype.slice.apply(arguments); // arguments.slice
  // var arr = [].slice.apply(arguments);

  console.log(arr);
  return arr;
}
convertArgsToArray(1, 2, 3); // [1,2,3]

• “Array.prototype.slice() 메소드를 호출하라. 단 this는 arguments 객체로 바인딩하라”는 의미가 되며, 결국 Array.prototype.slice() 메소드를 arguments 객체 자신의 메소드인 것처럼 arguments.slice()와 같은 형태로 호출하라는 것입니다.

3. bind
bind 함수는 함수가 가리키는 this만 바꾸고 호출하지는 않는 겁니다.
정확히 말하면 this를 정의하고 나서 그 함수를 복사해 새로운 함수를 만들어 리턴 하는 겁니다.

// bind()
var obj = {
  string: 'zero',
  yell: function() {
    alert(this.string);
  }
};
var obj2 = {
  string: 'what'
};
var yell2 = obj.yell.bind(obj2);
yell2(); // 'what'
obj.yell.bind(obj2)(); // 'what'

• obj.yell.bind(obj2) 했더니 yell 함수의 this가 obj2로 바뀌었습니다.
  즉 call이나 apply와 비슷하지만 호출은 하지 않지 않고 함수만 반환하는 겁니다.

결론
call,apply,bind 이놈은 더도 말고 그냥 참조하는 함수 조작이다.
뭘 조작하냐면, this를 바꿔서 마치 해당 함수가 어느 객체 안에 있게 할수 있다.

• apply는 인수를 배열로 받는 call이다.(나머지 2개 메소드와의 차이점이다.)

출처 - Call / Apply / Bind