엔진의 동작과 실행 컨텍스트의 형태(구성요소)
코드를 보면서 엔진의 동작과 자바스크립트 context의 구성을 살펴보자.
function book(){
var point = 123;
function show(){
var title = "자바스크립트";
// getPoint()
// this.bookAmount
};
function getPoint(){ return point; };
show();
};
book();
-
book()가 호출되면 엔진은 aaa 함수로 들어간다.- 변수
point를 선언 function show ~에서 funtion 키워드를 만나게 되면서 엔진은 show라는 function 오브젝트를 생성한다. 여기서, function object의[[Scope]]에 스코프를 설정한다.- 대괄호 2개는 엔진이 설정하는 프로퍼티를 뜻한다.
[[Scope]]에 들어가는 "스코프"는 show함수가 속한 영역(코드상에서 첫번 째 줄의{부터 여덟번 째 줄의})안에 있는 변수 이름과 함수 이름이다.- 즉, 자기가 속한 영역의 변수와 함수 이름을
[[Scope]]에 넣는다.
function getPoint ~~에서 function 키워드를 만나게 되면서 엔진은 getPoint이라는 function 오브젝트를 생성하고 위와 같은 동작을 한다.show()를 만나면서 show 함수를 호출하게 된다.
- 변수
- 엔진은 show 함수 내부로 이동해야 되지만! 먼저 실행컨텍스트를 만든다.
-
즉, 먼저 함수 실행을 위한 실행 환경을 구축하는 단계를 거친다.
-
show 함수의 실행 컨텍스트는 다음과 같다.
show 함수의 실행 콘텍스트 { "렉시컬 환경 컴포넌트(LEC)" : { "환경 레코드 (ER)" : { "선언적 환경 레코드(DER)": { title : "자바스크립트" }, "오브젝트 환경 레코드(OER)" : { } }, "외부 렉시컬 환경 참조(OLER)" : { point : 123, getPoint : function(){} } }, "변수 환경 컴포넌트(VEC)" : {}, "this 바인딩 컴포넌트(TBC)" : { 글로벌오브젝트window } }-
변수 환경 컴포넌트(VEC)와 렉시컬 환경 컴포넌트(LEC)의 초기값은 같다.
- 여기서 렉시컬이란 "정적"을 의미한다.
-
환경 레코드(ER) : 얘가 바로 Context(덩어리)다.
-
선언적 환경 레코드(DER)
- 코드 상에서
var title = "자바스크립트"를 만나면에title : "자바스크립트"와 같이 프로퍼티 형태로 저장한다.
- 코드 상에서
-
오브젝트 환경 레코드(OER)
-
외부 렉시컬 환경 참조(OLER)
- book() 함수 내부에서,
function show()~를 만났을 때, 엔진이 function 키워드를 만나게 되면서 function object를 만들었던 것을 기억해보자. function object의[[Scope]]에 내가 속한 영역에 속한 변수와 함수 이름을 설정했었다. [[Scope]]에 저장된 것을 외부 렉시컬 환경 참조(OLER)에 설정한다. (프로퍼티 형태로) 이 작업을 통해, 외부에 있는 함수나 변수를 하나의 실행 컨텍스트 안에 묶을 수 있고, 내 것처럼 사용할 수 있게 된다.
- book() 함수 내부에서,
-
-
this 바인딩 컴포넌트(TBC)는 this로 참조할 오브젝트를 바인딩 하는 것이다.
[[Scope]]를 이용하는 것 외에, 우리는 this를 이용해서 외부에 위치한 변수의 값을 가져올 수 있다. (this.bookAmount와 같이)- show의 this는 show() 함수 앞에 위치한 오브젝트를 참조한다. 현재 오브젝트를 작성하지 않았지만, this로 참조할 수 있는 것을 this 바인딩 컴포넌트에 설정한다.
- show 함수 앞에 오브젝트를 작성하지 않았기 때문에, 디폴트로 this는 글로벌 오브젝트를 참조하게 된다. ???
- 글로벌 오브젝트는 실체가 없는 것이므로, host object 개념으로 window 오브젝트를 참조하게 된다.
-
이렇게 함수가 참조할 수 있는 것들의 덩어리가 실행 컨텍스트가 된다. 함수가 메모리에 올라갔을 때, 다른 함수나 변수를 참조하기 위해 현재 메모리 주소에서 빠져나오거나 다른 것들을 메모리에 올릴 필요가 없어졌다.
이것이 자바스크립트의 정적 컨텍스트다. 환경을 동적으로 만드는 것이 아니라, 정적으로 미리 만들어 둔다. 이에 맞춰서 우리가 코드를 작성하면 엔진이 더 빠르게 동작할 것이다. (실행 컨텍스트를 공부하는 목적)
Lexical 환경 컴포넌트 의 개념을 다시 보자. 엔진이 function show 구문의 function 키워드를 만나면서 show function object를 만들게 된다. 이때 [[Scope]]가 결정이 된다. 이것을 정적(Lexical) 스코프라고 한다.
- 실행 컨텍스트의 lexical 환경 컴포넌트의 Scope(유효범위)는 정적으로(즉, 함수가 호출되었을 때가 아니라, 엔진이 코드를 해석할 때)만들어진다.
- 만약 show()함수를 호출했을 때 scope를 결정하게 되면, 그것은 다이나믹 스코프가 된다. 물론 자바스크립트에선 동적으로 scope를 만드는 것이 있다. 그러나 자바스크립트는 기본적으로 정적으로 스코프를 만들고 환경을 만든다고 알아두자
