[JavaScript] Execution Context

SEJIN·2023년 9월 24일

JavaScript

목록 보기

2/3

Execution Context (실행 컨텍스트)

실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다.

콜스택에서 처리하기 때문에 순서와 환경이 보장된다. (FILO: First in, Last out의 구조)

Execution Context의 생성과 삭제

먼저 자바스크립트 코드가 실행이 되면 콜스택에서는 전역 컨텍스트를 생성하게 된다. 전역 컨텍스트와 관련된 코드가 실행 도중에 a라는 함수가 실행이 되는 코드가 있고 그 함수가 실행이 되는 순서가 되면, 전역 컨텍스트의 관련된 코드는 잠시 실행이 중단이 된다.

콜스택 최상단에는 a 실행 컨텍스트를 담아 a 실행 컨텍스트를 최우선적으로 처리하게 되는데 여기서 또 b라는 함수를 실행하는 코드가 있으면 콜스택 최상단에서는 b 실행 컨텍스트가 담기게 되어 a 실행 컨텍스트의 코드 진행을 잠시 일시적으로 중단하고 b 실행 컨텍스트와 관련된 코드를 최우선적으로 처리하다가 b 함수가 끝나면 콜스택에서 b 실행 컨텍스트가 삭제가 된다.
콜스택 최상단에는 다시 a 실행 컨텍스트가 위치하게 되어 중단된 시점의 a 관련 코드가 실행이 된다.

그러다 a 함수가 끝이나게 되면 콜스택에서 a 실행 컨텍스트가 삭제되고 a 함수 실행 시점에 중단된 전역코드가 다시 진행이 되어 콜스택 내부에는 전역 컨텍스트만 남아있게 되고, 그 이후에 실행할 코드가 없으면 콜스택에서 전역 컨텍스트를 삭제하고 콜스택 내부는 아무것도 없는 상태로 종료가 된다.

Execution Context의 구성

ThisBinding

this는 실행 컨텍스트를 가리키는 것이고, ThisBinding은 this가 무엇을 가르킬지 연결하는 것이다. ThisBinding은 실행 컨텍스트가 생성(함수 호출)이 될 때 정해진다.

전역과 일반 함수에서 호출할 때 => window

console.log(this); // this => window

function a() {
	consolel.log(this);
};

a(); // this => window

메소드로 호출 할 때 (가장 가까운 주체를 생각하면 this가 무얼 가르키는 지 쉽다.) => 가장 가까운 주체가 this가 되며, 메소드 내에서 선언된 함수내의 this는 메소드가 아니고 일반 함수이며 이 함수의 this는 window가 된다.

const a = {
    b: function() {
        console.log(this);
        
        function etc() {
        	console.log(this); 
		};
        
        etc(); // 일반 함수이므로 window
    },
};

a.b(); // this => a

const b = {
    c: {
        d: function() {
            console.log(this);
        },
    },
};

b.c.d(); // this => b.c

VariableEnvironment

environmentRecord와 outerEnvironmentReference를 가지고 있다.
VariableEnvironment에 먼저 정보를 담고, 그 정보를 초기에 LexicalEnvironment에 복사한다.

LexicalEnvironment

초기에는 VariableEnvironment와 정보와 같지만 VariableEnvironment의 변경사항이 실시간으로 적용이 되며 최신 상태를 저장한다.

environmentRecord

현재 지역의 식별자 정보(변수, 함수)
변수 객체

outerEnvironmentReference

상위 Lexical Environment를 참조하는 포인터
중첩된 자바스크립트 코드에서 스코프 탐색을 하기 위해 사용

const global = 'Global';
// 전역: 콜스택에서 최하단에 위치 (우선순위 x)

function a() {
	const a = 1;
    const b = 2;
    
    console.log(global);
    console.log(a);
    console.log(b);
    
    // a함수: 콜스택에서 최상단에 위치 (우선순위)
};

a(); // 'Global', 1, 2
// 여기 a 함수 내부에서 전역 변수 global을 참조할 수 있는 이유는
// a 함수 실행 컨텍스트 내의 outerEnvironmentReference가 
// 상위인 전역 컨텍스트의 LexicalEnvironment을 참조해서 global을 참조 할 수 있다.

console.log(a); // a is not defined
console.log(b); // b is not defined
// 전역 컨텍스트 내에서 a와 b라는 식별자의 대한 정보가 없다.