[Javascript] 실행 콘텍스트 상태 컴포넌트

출처

자바스크립트 중고급: 근본 핵심 이해 - 인프런 | 강의

 

 

---

 

🚀 실행 콘텍스트 상태 컴포넌트

 

1) 렉시컬 환경 컴포넌트(Lexical Environment)

◽ 렉시컬 환경 컴포넌트
함수와 변수의 식별자 해결을 위한 환경을 설정한다.
함수 초기화 단계에서 해석한 함수와 변수를 {name:value} 형태로 저장하여, 이름으로 함수와 변수를 검색할 수 있게 된다.
함수 밖의 함수와 변수를 참조할 수 있는 환경을 설정하여 함수 밖의 함수와 변수를 사용할 수 있게 한다.

 

◽ 렉시컬 환경 컴포넌트의 생성

function, with, try-catch에서 생성

◽ 렉시컬 환경 컴포넌트의 구성
환경 레코드(ER, Environment Record)
외부 렉시컬 환경 참조(OLER, Outer Lexical Environment Reference)

 

◽ 렉시컬 환경 컴포넌트의 설정

환경레코드에 함수 안의 함수와 변수를 기록한다.

외부 렉시컬 환경 참조에 FO의 [[Scope]]를 설정한다.

따라서 함수 안과 밖의 함수와 변수를 사용할 수 있게 되며, 엔진 처리가 심플하여 속도가 빠르다.

 

실행 콘텍스트(EC): {
    렉시컬 환경 컴포넌트(LEC): {
        환경 레코드(ER): {
            ex: 1
        },
        외부 렉시컬 환경 참조(OLER): {
            test: "테스트",
            tryTest: function(){}
        }
    }
}

 

◽ 외부 렉시컬 환경 참조(OLER)

스코프와 실행중인 함수가 Context 형태이므로 스코프의 변수와 함수를 별도의 처리 없이 즉시 사용할 수 있다.

이미 메모리에 올라가 있기 때문에 함수와 변수를 찾기위해 실행 콘텍스트 밖으로 나갈 필요없이 설정이 되어있다.

---

2) 변수 환경 컴포넌트(Variable Environment)

실행 콘텍스트 초기화 단계에서 렉시컬 환경 컴포넌트와 같게 설정한다.

렉시컬 환경 컴포넌트가 메인인데 같이 설정한다.

 

이렇게 하는 이유는 초기값을 복원할 때 사용하기 위한 것으로,

실행결과를 렉시컬 환경 컴포넌트에 설정하기때문에 초기값이 변하기 때문에

이를 유지하기 위한 것이다.

---

3) this 바인딩 컴포넌트

목적은 this로 함수를 호출한 오브젝트의 프로퍼티에 접근하는 것이다.

ex) this.propertyName로 접근할 수 있다.

 

◽ access 메커니즘

- obj.book() 형태에서 this로 obj를 ref 할 수 있도록 this 바인딩 컴포넌트에 object를 참조한다.

- object의 프로퍼티가 변경되면 동적으로 참조하는데 이것은 설정/할당(=정적)의 개념이 아니라 참조(=동적)의 개념이기 때문이다.

- 함수 실행 중 object의 프로퍼티가 삭제되거나 값이 변경될 수 있는데

this로 참조할 수 있는 object를 바인딩만 시켜놓고 그 안의 프로퍼티는 묶어놓지 않기 때문에 동적으로 반영될 수 있다.

 

[예제 코드]

var obj = {point: 100};
// 2: 호출되면서 getPoint를 this 바인딩 컴포넌트에 묶어놓는다.
// 이 때 object를 묶어놓은 것으로 그 안의 프로퍼티를 묶은 것은 아니다.
obj.getPoint = function() {
    return this.point;
};
// 1: 여기서 호출
obj.getPoint();

 

[예제 코드의 상태]

실행 콘텍스트(EC): {
    // 함수안에서 값을 구할 수 있는 것은 렉시컬 환경 컴포넌트에서 구할 수 있다.
    // 그 이외의 것은 this로 참조해서 프로퍼티를 구하거나 this에 있는 메소드를 호출한다.
    // this 바딩인 컴포넌트에 묶어놓은 것이다.
    렉시컬 환경 컴포넌트(LEC): {
        환경 레코드(ER): {
            선언적 환경 레코드(DER): {},
            오브젝트 환경 레코드(OER): {}
        },
        외부 렉시컬 환경 참조(OLER): {}
    },
    변수 환경 컴포넌트(VEC): {},
    this 바인딩 컴포넌트(TBC): {
    	// 이렇게 this 바인딩 컴포넌트에 참조되어 있다.
        point: 100,
        getPoint: function(){}

    }

}