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