웹/JS핵심개념 JS Flow

[JS Flow] 03. This Binding

onwah 2021. 1. 20. 19:49

When??

실행 컨텍스트가 활성화될 때 (함수를 호출할 때) binding된다!

How

case 'this' is bound to
전역공간에서 호출 시 전역객체 (window / global)
함수 호출 시 전역객체 (window / global) - 함수는 전역객체의 메서드라고 생각하면 편하다, 함수 내부에 선언된 함수도 전역객체에 bind됨
메서드 호출 시 메서드 호출 주체 (a.b() -> 객체 a가 메서드 호출 주체) - 근데 메서드 내부에 선언된 함수는 전역객체에 bind됨;;
callback함수 호출 시 기본적으로는 함수 내부와 동일하다. 전역객체가 bind됨. 하지만 제어권을 가진 함수(like addEventListener())가 따로 bind되는 this를 명시(구현)한 경우 해당 스펙을 따름. 그러나 callback함수를 넘길 때 bind()를 체이닝해서 넘겨주면 bind된 this를 따른다.
생성자 함수 호출 시('new' 키워드) 인스턴스 객체가 this가 된다.

+@ call, apply, bind의 this binding

  1. call, apply: 기본적으로 동작이 같다고 생각하면 된다. 첫번째 인자가 this의 대상이 된다. 차이점은 두 번째 인자부터 전달할때 call은 전개해서, apply는 두 번째 인자에 배열로 전달한다. 그리고 해당 함수를 호출한다.
  2. bind: bind 역시 첫 번째 인자가 this의 대상이 된다. 하지만 즉시 실행하지 않고, this가 bind된 함수를 반환한다.