this

this는 함수가 호출되는 방식에 따라 참조하는 객체가 동적으로 결정되는 키워드이다. 즉, 함수가 어떻게 호출되었는지에 따라 this가 가리키는 대상이 달라진다.

this는 실행 컨텍스트가 활성화될 때 바인딩된다. 실행 컨텍스트는 함수가 호출되는 순간에 생성되므로, this는 함수 호출 시점에 결정된다.

함수 호출 방식에 따른 this

this
├── 전역 공간: window (브라우저) / global (Node.js)
├── 함수 호출: window / global
│   └── 화살표 함수: 자신이 선언된 외부 컨텍스트의 this를 가리킴 (Lexical this)
├── 메서드 호출: 메서드를 호출한 객체 (메서드명 앞의 객체)
├── 콜백 함수 호출: 일반 함수와 동일 (함수 내부에서의 호출 방식에 따름)
└── 생성자 함수 호출: 새로 생성된 인스턴스 객체

• window와 global은 ECMAScript에서 정의한 객체가 아니다. 각 호스트 환경(브라우저, Node.js 등)에서 ECMAScript 사양에 따라 제공하는 전역 객체 구현체이다. 즉, 호스트 환경마다 구체적인 전역 객체의 내용은 달라질 수 있다.

콜백함수에서의 this binding

콜백 함수도 일반 함수처럼 호출되므로, 기본적으로 this는 전역 객체 또는 undefined(strict 모드)이다. 하지만, this를 명시적으로 바인딩할 수 있는 메서드가 있다:

.call(thisArg, ...args); // 즉시 호출하면서 this 지정
.apply(thisArg, [args]); // 즉시 호출, 인자를 배열로 전달
.bind(thisArg); // 새로운 함수 반환, this를 영구 바인딩