this(2) : 명시적으로 this를 바인딩하기

앞서 살펴본 this의 규칙을 깨고 this에 다른 대상을 바인딩할 수도 있습니다. call, apply, bind 메서드를 주로 사용하지만, 이러한 메서드를 사용하기보다 (가능하다면) 화살표 함수를 이용하는 것이 더 깔끔합니다. 일단 무엇이 있는지만 알아두도록 합시다.

 

요새 화살표 함수가 일반 함수를 대체할 수 없다는 것을 통감하고 있습니다. 때에 따라 적절한 방식의 함수를 사용합시다. ㅜㅜ

 

 

* 함수에 call, apply, bind와 같은 메서드를 정의한 적이 없음에도 사용할 수 있는 이유는 이 메서드들이 prototype에 정의된 메서드들이기 때문입니다. 프로토타입에 대해서는 이후에 다루도록 하겠습니다.

 

 

• call 메서드

 

call 메서드는 호출하는 함수의 첫 인자를 this로 바인딩합니다. 이후의 인자들은 그냥 매개변수입니다. 

 

const a = function (...b) {
  console.log(this, b);
};

a(1, 3, 5);
// this는 window를 가리킵니다.

a.call({ x: 1 }, 1, 3, 5);
// this는 {x: 1}을 가리킵니다.

a.call({ x: 1, y: 2 }, 3, 6, 8);
// this는 { x: 1, y: 2 }을 가리킵니다.

 

 

 

 

• apply 메서드

 

call 메서드와 대동소이합니다. applay 메서드는 두번 째 인자를 배열로 받아 배열의 요소들을 함수의 매개변수로 지저한다는 점만 차이가 있습니다.

 

const test = function (a, b, c) {
  console.log(this, a, b, c);
};

test.apply({ x: 1 }, [1, 3, 5]);
// 출력 결과 {x: 1} 1 3 5 

 

• bind 메서드

 

bind는 call, apply보다 개선된 ES5의 메서드입니다. this를 명시적으로 바인딩할 수 있습니다.

 

const test = function (a, b, c) {
  console.log(this, a, b, c);
};

test(1, 3, 5);
// this는 전역 객체를 가리킵니다.

const bindTest = test.bind({ x: 1 });
bindTest(2, 4, 7);
// this는 { x: 1 }를 가리킵니다.