들어가며

• 이 내용은 코어 자바스크립트의 강의 중 실행 컨텍스트와 this를 정리한 내용 입니다.
• 강의링크

실행 컨텍스트

함수를 실행할 때 필요한 조건 및 환경정보 (전역공간, 함수, eval¹, module)

실행 컨텍스트의 구조

• VariableEnvironment : 식별자 정보 수집 (실행중 변화 반영x)
• LexicalEnvironment : 각 식별자의 데이터 추적(실행중 변화 반영o)
• ThisBinding

LexicalEnvironment

실행컨텍스트를 구성하는 환경 정보들을 모아 사전처럼 구성한 객체

• environmentRecord : 현재 컨텍스트 내의 식별자 정보(호이스팅² 개념과 일치)
• outerEnvironmentReference : 외부 환경에 대한 참조(외부 LexicalEnvironment) 이것을 이용해서 scope chain 이 일어남

식별자 정보 수집 과정 (호이스팅 과정)

참조코드

1
2
3
4
5
6
7
8
9
10

console.log(a());

function a() {
    return 'a';
}

var b = function bb() {
    return 'bb';
}

1. 함수의 정보를 수집한다.
2. 변수의 정보를 수집한다.(값은 수집하지 않음)

결과

1
2
3
4
5

environmentRecord
{
    function a() {...},
    b: undefined
}

Scope chain 과정

(inner() 함수 관점에서 기술)

1. 처음에 console.log에 a값은 선언이 되어 있기는 하지만 아직 값이 할당되지 않은 상태이므로 undefined가 출력된다.
2. 그 다음에 변수 a에 100이 할당된다.
3. 변수 b의 경우 inner 함수에는 선언되어 있지 않다 따라서 outerEnvironmentReference를 통해서 제일가까운 스코프인 outer의 LexicalEnvironment의 environmentRecord를 참조한다.
4. outer또한 변수 b가 없으므로 outer의 outerEnvironmentReference를 참조한다.(Global Environment)
5. Global Environment에는 변수 b가 정의되어 있고, 값도 할당된 상태이므로 20이 출력된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

var a = 10;
var b = 20;
function outer(){
    console.log(`#Outer`, a);

    function inner(){
        console.log(`#Inner`, a);
        var a = 100;
        console.log(`#Inner`, b);
        
    }
    inner();
};
outer();
console.log(`#Global`, a);

ThisBinding

This: 자신을 가리키는 식별자를 지칭 함수가 호출될 때, 결정된다. 즉 동적으로 할당된다.

• 전역공간 : 전역객체(window / global)
• 함수로 호출 : 전역객체(window / global)
• 메서드로 호출(객체 내에 정의된 함수) : 메서드 호출 주체
  • a.b() > a가 this가 됨
  • a.b.c() > a.b가 this가 됨
• callback 호출시
  • 기본적으로 함수의 this와 같다(전역객체)
  • 제어권을 가진 함수(콜백을 호출하는)가 콜백의 this를 지정해두는 경우도 있다(call, apply, bind를 이용해서)
• 생성자함수(new) 호출 시 : 해당 인스턴스