자바스크립트 핵심 개념 : call / apply / bind 메서드 이해하기

콜백함수에서 this를 바인딩할 때 
"기본적으로는 함수와 동일, 즉 전역객체(window)이다."라는 정의가 있는데
아래 세가지 메서드는 그 사실을 벗어난다.

즉, call / apply / bind는 명시적인 this 바인딩이 가능하게 나온 메서드이다.
그런 의미에서 세 가지의 차이를 확인해보자.

 function a(x, y, z) {
   console.log(this, x, y, z);
 }
 
 var b = { c: 'eee'};
 
 // call
 a.call(b, 1, 2 ,3);
 
 // apply
 a.apply(b, [1,2,3]);
 
 // bind
 var c = a.bind(b);
 c(1,2,3);
 

처음 볼때는 이게 뭔 코드야 싶겠지만,
어떤 인자값이 오는지 확인해보면 그리 복잡한 코드가 아니다.

a.call(this, 인자1, 인자2, 인자3...)  / 즉시호출 가능
a.apply(this, [array]) / 즉시호출 가능
a.bind(this, 인자1, 인자2, 인자3...) / 새로운 함수생성

call(this, 1,2,3) 
- call은 매개변수로 this부분을 직접 정의하는게 가능하다.
- 인자를 차례대로 하나씩 받는다.
- 즉시 호출한다.

apply(this,  [arry])
- apply도 매개변수로 this부분을 직접 정의하는게 가능하다. 
- 인자는 한꺼번에 지정하여 배열로 온다.
- 즉시 호출한다. 

bind(this, 1,2,3 )
- bind도 매개변수로 this부분을 직접 정의하는게 가능하다. 
- 인자를 차례대로 하나씩 받는다.
- 즉시 호출되지 않으며 새로운 함수를 생성할 뿐이다.

셋 모두 {c: "eee"} 1 2 3 라는 같은 결과를 만든다.

해당 코드를 상세히 설명하면,
함수 a(x,y,z)에서 세개의 인자값을 받도록 정의되어 있다.
this로는 인자값을 받을 수가 없으므로 생략하고 콘솔을 찍을 때 받는다.

a.call은 this를 b로 받도록 명시하고, 1,2,3을 차례대로 받는다.
a.apply도 this를 b로 받도록 명시하고, [1,2,3]을 배열형태로 받는다.
bind는 즉시호출없이 함수생성을 하므로 
변수 c에 this를 b로 명시하여 넣고 나중에 1,2,3을 추가한다.
(굳이 이렇게 한 이유는, 원리를 설명하는게 목표라 같은 결과를 내기 위해)

셋 모두 함수에서 this를 제어하기 위한 것이다.

 

- 정재남님의 자바스크립트 핵심 개념강의를 이해후 재정리한 것