[JS] call & apply & bind

---

알고있으면 좋은 Javascript Tip✨

---

함수에서 사용되는 this는?

• 보통 어떤 함수를 함수로서 호출한 경우 this는 전역객체를 참조한다.
• 실행해보면 전역객체인 window 객체가 출력된다.
• 전역객체가 아닌 다른 객체를 출력하고 싶은 경우 call, apply, bind를 사용한다.

function test(){
  console.log(this);
};

test();

 

(1) call

• call 메서드는 메서드의 호출 주체인 함수를 즉시 실행하는 메서드이다.
• 전역객체가 아닌 바인딩 시켜준 객체가 출력된다.

function test(c, d){

  // {a : 1, b : 2} 3 4
  console.log(this, c, d);
};

test.call({a : 1, b : 2}, 3, 4);

 

(2) apply

• call 메서드와 동일하게 메서드의 호출 주체인 함수를 즉시 실행하는 메서드이다.
• 차이점은 첫번째 인자 이후의 인자들을 배열로 받는다.

function test(c, d){

  // {a : 1, b : 2} 3 4
  console.log(this, c, d);
};

test.apply({a : 1, b : 2}, [3, 4]);

 

(3) bind

• bind 메서드는 함수를 즉시 실행하지 않고 넘겨 받은 인수를 바탕으로 새로운 함수를 반환하는 메서드이다.

function test(c, d){

  // {a : 1, b : 2} 3 4
  console.log(this, c, d);
};

const newTest = test.bind({a : 1, b : 2}, 3, 4);
newTest();

 

⭐개념정리⭐

• call, apply, bind 메서드 모두 명시적으로 this를 바인딩 할 때 사용한다.
• call 메서드와 apply 메서드는 메서드의 호출 주체인 함수를 즉시 실행한다.
• apply 메서드는 첫번째 인자 이후의 인자들을 배열로 받는다.
• bind 메서드는 call 메서드와 apply 메서드와는 다르게 함수를 즉시 실행하지 않고 새로운 함수를 반환한다.