this는 실행 컨텍스트가 생성될 때 함께 만들어진다.

<aside> 💡 실행 컨텍스트는 함수가 호출될 때 생성되므로, this 역시 함수 호출 시 결정된다.

</aside>

<aside> 💡 this에는 자신을 호출한 주체에 대한 정보가 담긴다.

</aside>

상황 this가 가리키는 객체
전역 공간 전역 객체
함수로서 호출 전역 객체
메서드가 내부 함수로서 호출 전역 객체
메서드가 메서드로서 호출 호출한 객체
콜백 함수 콜백 함수의 제어권을 가진 함수의 설정에 따라 달라짐. 디폴트는 전역 객체.
화살표 함수 this가 없음. 자신을 호출한 함수의 this(렉시컬 스코프)
생성자 함수 자신이 생성할 인스턴스 자체

3-1-1 전역 공간에서의 this

<aside> 💡 전역 공간에서의 this는 전역 객체를 가리킨다.

</aside>

전역 객체는 브라우저 환경에서는 window이고, Node.js 환경에서는 global이다.

// 브라우저
this === window

// Node.js
this === global

전역 변수와 전역 객체의 프로퍼티

전역변수를 var로 선언하면 자바스크립트 엔진은 이 전역 변수를 전역 객체의 프로퍼티로 할당한다. 즉, 변수이면서 동시에 객체의 프로퍼티가 되는 것이다.

var glob = 'global variable'
window.glob                  // 'global variable'
this.glob                    // 'global variable'

이는 사실 자바스크립트의 변수는 모두 실행 컨텍스트의 LexicalEnvironment 객체의 프로퍼티로 동작하기 때문이다. 실행 컨텍스트가 변수 정보를 수집해 L.E에 프로퍼티로서 저장하고, 변수를 호출하면 L.E에서 프로퍼티를 조회하게 된다.

3-1-2 메서드로서 호출할 때 그 메서드 내부에서의 this

함수 vs 메서드

<aside> 💡 함수와 메서드를 구분하는 유일한 차이는 독립성에 있다. 함수는 그 자체로 독립적이지만, 메서드는 자신을 호출한 대상 객체에 대한 동작을 수행한다.

</aside>