설탕빵의 설탕공방요즘 프론트 만지면서 컨텍스트랑 this 개념이 흐릿해진거 같아서 다시 정리해보고자 한다.
컨텍스트
먼저 실행 컨텍스트는 전역 컨텍스트랑 eval 등 함수 실행에 의한 컨텍스트로 나뉜다.
실행 컨텍스트 객체는 활성화 시점에 VariableEnvironment, LexicalEnviroment, ThisBinding의 세 가지 정보를 수집하는데,
초기 생성시에는 VariableEnvironment와 LexicalEnviroment가 동일한 내용으로 구성된다.
이후 LexicalEnviroment는 함수 실행 도중에 변경되는 사항이 즉시 반영되고,
VariableEnviroment은 초기 상태를 유지한다.
여기서 두 환경은 매개변수명, 변수의 식별자, 선언한 함수의 함수명 등을 수집하는 enviromentRecord와 바로 직전 컨텍스트의 LexicalEnviroment 정보를 참조하는 OuterEnviromentReference로 구성된다.
outerEnviromentReference는 해당 함수가 선언 된 위치의 LexicalEnviroment를 참조하는데,
코드 상으로 변수에 접근 시, 현재 컨텍스트의 LexicalEnviroment를 탐색해 발견되면 그 값을 반환한다.
없으면 다시 outerEnviromentReference에 담긴 LexicalEnviroment를 탐색하는 과정을 거치고,
전역 컨텍스트의 LexicalEnviroment까지 탐색해도 해당 변수를 찾지 못하면 undefined를 반환한다.
this에는 실행 컨텍스트를 활성화하는 당시의 지정된 this가 저장되고,
함수를 호출하는 방법에 따라 그 값이 달라진다.
지정되지 않은 경우에는 전역 객체가 저장된다.
this
전역 공간에서의 this
전역 컨텍스트를 생성하는 주체가 전역 객체이기에,
활성화하는 당시의 지정된 this 또한 전역 객체이다.
메서드로서 호출할 때 그 메서드 내부에서의 this
this에는 호출한 주체에 대한 정보가 담긴다.
어떤 함수를 메서드로서 호출하는 경우에는,
호출 주체는 바로 함수명 앞의 객체다.
함수로서 호출할 떄의 그 내부에서의 this
함수를 함수로서 호출화는 경우 this가 지정되지 않는다.
호출 주체에 대한 명시가 아닌 개발자가 코드에 직접 관여했다고 판단하기 때문이다.
this가 지정되지 않았기 때문에 전역 객체를 바라보게 된다.
콜백 함수 호출 시 그 함수 내부에서의 this
함수 A의 제어권을 함수 B에 넘겨줬을 경우,
함수 A는 함수 B의 내부 로직에 따라 실행된다.
즉 this 역시 함수 B 내부 로직에서 정한 규칙에 따라 값이 결정된다.
일단 콜백 함수도 함수이기 때문에 함수 호출 법칙에 따라 this는 전역객체를 참조한다.
다만, 제어권을 받은 함수에서 콜백 함수에 별도로 this가 될 대상을 지지정했다면 그 대상을 참조한다.
생성자 함수 내부에서의 this
new 명령과 함께 함수를 호출하면 해당 함수가 생성자로서 동작한다.
이떄 어떤 함수가 생성자 함수로서 호출 된 경우 내부에서의 this는 곧 새로 만들 구체적인 인스턴스 자신이 된다.
명시적으로 this를 바인딩 하는 경우
call 메서드
call 메서드는 호출 주체인 함수를 즉시 실행한다.
이때 메서드 첫 번째 인자를 this로 바인딩한다.
그냥 실행하면 기본값으로 전역 객체를 참조한다.
apply 메서드
기능적으로는 call과 동일
bind 메서드
call과 비슷하지만 즉시 호출 대신 넘겨받은 this 및 인수를 바탕으로 새로운 함수를 반환한다.
예외 사항
ES6에 새롭게 도입된 화살표 함수로 실행 컨텍스트 생성 시,
this를 바인딩 하는 과정에서 제외된다.
즉 함수 내부에는 this가 없음으로 접근시 스코프 체인상 가장 가까운 this로 접근한다.