유블로그

자바스크립트 실행 컨텍스트 생성 과정 본문

JavaScript & jQuery

자바스크립트 실행 컨텍스트 생성 과정

yujeong kang 2021. 6. 19. 17:57

실행컨텍스트는 C의 콜스택과 비슷하다.

실행 가능한 코드를 형상화하고 구분하는 추상적인 개념이다.

실행 가능한 자바스크립트 코드 블록(대부분 함수)이 실행되는 환경이라고 할 수 있다.

 

실행 컨텍스트가 생성된 후 실행 순서

1. 활성 객체 생성

실행 컨텍스트가 생성되면 자바스크립트 엔진이 그 컨텍스트에서 필요한 객체를 생성하는데 그것을 활성 객체라고 한다. 매개변수, 정의한 변수, 객체를 저장한다.

 

2. arguments 객체 생성

1의 활성 객체는 arguments 프로퍼티를 가지고 있는데, 그 프로퍼티가 이 arguments 객체를 참조한다.

 

3. 스코프 정보 생성

현재 컨텍스트 유효 범위를 나타내는 스코프 정보를 생성한다.

연결 리스트와 유사한 형식이다.

이 리스트로 현재 컨텍스트의 변수, 상위 실행 컨텍스트의 변수에 접근 가능하다.

이 리스트를 스코프 체인이라고 한다. 활성 객체에서 [[scope]] 프로퍼티로 참조된다.

현재 생성된 활성 객체가 스코프 체인의 제일 앞에 추가된다.

 

4. 변수 생성

현재 컨텍스트에서 사용하는 지역 변수가 생성된다.

1의 활성 객체가 변수 객체로 사용된다. 즉 활성 객체와 변수 객체는 동일하다.

이 활성 객체 안에 정의된 변수와 함수 등이 생성된다. 아직 생성만 하고 초기화되지 않은 상태로 변수에는 undefined가 할당되고 함수에는 함수 객체만 할당되어있다.

 

5. this 바인딩

자신을 호출한 객체에 this가 바인딩된다.

this가 참조하는 객체가 없으면 전역 객체가 참조된다.

 

function func(param1, param2) {
	var a = 1, b = 2;
    function func() {
    	return a+b;
    }
    return param1 + param2 + func();
}

func(3, 4);

위 코드를 func() 로 실행하는 순간 만들어지는 컨텍스트 구조가 아래이다.

6. 코드 실행

위의 실행 컨텍스트 생성, 활성 객체 생성 후 드디어 코드 내 표현식 실행이 된다.

이 때 변수 a 와 b 에 각 1, 2 값이 할당된다.

 

전역 컨텍스트의 경우에는 arguments 객체가 없고 전역 객체 하나만을 포함하는 스코프 체인이 있다.

전역 코드가 실행될 때 전역 컨텍스트가 생성된다.

전역 실행 컨텍스트의 활성 객체(변수 객체)가 곧 전역 객체다. 그래서 전역으로 생성된 변수, 함수 등이 모두 전역 객체의 프로퍼티가 된다.