Merge pull request #50 from InSeong-So/main

✏️ 6회차 문서 수정 : 실행 컨텍스트

Author: InSeong-So

Javascript/README.md

@@ -99,7 +99,7 @@
       6st Week<br>
       (2021-10-02)
       </td>
-      <td><a href="/FECrash/JavascriptCrash/blob/main/Javascript/function.md#%EC%9D%BC%EA%B8%89-%EA%B0%9D%EC%B2%B4">this</a></td>
+      <td><a href="/FECrash/JavascriptCrash/blob/main/Javascript/this.md">this</a></td>
       <td>-</td>
     </tr>
     <tr>

Javascript/execution_context.md

@@ -147,5 +147,132 @@ out();
 
 `실행 컨텍스트 스택`이 **코드의 실행 순서를 관리**한다면 `렉시컬 환경`은 **스코프와 식별자를 관리**합니다.
 
+렉시컬 환경의 스코프 식별자 관리 방법은 이렇습니다. 키와 값을 갖는 객체 형태의 스코프(전역, 함수, 블록 스코프)를 생성하여 식별자를 키로 등록하고, 식별자에 바인딩된 값을 관리하는 것이죠. 즉, 스코프를 구분하여 식별자를 등록하고 관리하는 저장소 역할을 하는 **렉시컬 스코프의 실체**입니다.
+
+<br>
+
+### 실행 컨텍스트의 구성
+실행 컨텍스트는 렉시컬 환경 컴포넌트(LexicalEnvironment Component)와 변수 환경 컴포넌트(VariableEnvironment Component)로 구성되며, 생성 초기의 실행 컨텍스트와 렉시컬 환경은 아래의 그림과 같습니다.
+
+<br>
+
+<div align='center'>
+
+<img src='./img/execution_context/execution_context_lexical_envrionment.jpg' width='600'/>
+
+</div>
+
+<br>
+
+생성 초기, 렉시컬 환경 컴포넌트와 변수 환경 컴포넌트는 동일한 렉시컬 환경을 참조합니다. 이후 특정 상황에 따라 각 컴포넌트가 가리키는 내용이 달라지기도 하지만, 이 장에서는 그렇게 깊이 다루지 않겠습니다.
+
+<br>
+
+### 렉시컬 환경의 구성
+렉시컬 환경은 환경 레코드 컴포넌트(EnvironmentRecord Component)와 외부 렉시컬 환경을 참조하는 컴포넌트(OuterLexicalEnvironmentReference)로 구성됩니다.
+
+<br>
+
+<div align='center'>
+
+<img src='./img/execution_context/lexical_environment.jpg' width='600'/>
+
+</div>
+
+<br>
+
+- 환경 레코드
+  - 스코프에 포함된 식별자를 등록하고, 등록된 식별자에 바인딩 값을 관리하는 저장소입니다.
+  - 환경 레코드는 소스코드 타입에 따라 관리 내용에 차이가 있습니다.
+- 외부 렉시컬 환경에 대한 참조
+  - 외부 렉시컬 환경에 대한 참조는 상위 스코프를 가리킵니다.
+  - 이때 상위 스코프란 외부 렉시컬 환경으로 해당 실행 컨텍스트를 생성한 소스코드를 포함하는 상위 코드의 렉시컬 환경을 의미합니다.
+  - 외부 렉시컬 환경에 대한 참조를 통해 단방향 연결 리스트인 스코프 체인을 구현하죠.
+
+<br>
+
+## 실행 컨텍스트의 생성과 식별자 검색 과정
+> 어떻게 실행 컨텍스트가 생성되고 코드 실행 결과가 관리되는지, 어떻게 실행 컨텍스트를 통해 식별자를 검색하는지 알아볼까요?
+
+<br>
+
+### 전역 객체 생성
+전역 객체는 전역 코드가 평가되기 이전에 생성됩니다. 전역 객체도 Object.prototype을 상속 받는 프로토타입 체인의 일원입니다.
+
+<br>
+
+### 전역 코드 평가
+소스코드가 로드되면 자바스크립트 엔진에 의해 아래의 순서대로 전역 코드가 평가됩니다. 내용이 장황하니 최대한 간략하게, 요점만 기술합니다.
+
+- **전역 실행 컨텍스트 생성**
+  - 비어있는 전역 컨텍스트를 생성하고 실행 컨텍스트 스택에 푸시합니다.
+  - 전역 컨텍스트는 최상위 실행 컨텍스트 스택이 됩니다.
+
+<br>
+
+- **전역 렉시컬 환경 생성**
+  - 전역 렉시컬 환경을 생성하고 전역 실행 컨텍스트에 바인딩합니다.
+   1. 전역 환경 레코드 생성
+       - 전역 변수를 관리하는 전역 스코프, 전역 객체의 빌트인 전역 프로퍼티와 빌트인 전역 함수, 표준 빌트인 객체를 제공합니다.
+   2. 객체 환경 레코드 생성
+       - 전역 환경 레코드를 구성하는 컴포넌트 객체로서 BindingObject(전역 객체 생성에서 생성된 전역 객체)라는 객체와 연결됩니다.
+       - 전역 코드 평가 과정에서 var 키워드로 선언한 전역 변수, 함수 선언문으로 정의된 전역 함수는 전역 환경 레코드의 객체 환경 레코드에 연결된 BindingObject를 통해 전역 객체의 프로퍼티와 메서드가 됩니다.
+   3. 선언적 환경 레코드 생성
+       - var 키워드로 선언한 전역 변수와 함수 선언문으로 정의된 전역 함수를 제외한 모든 변수와 함수는 선언적 환경 레코드에 등록되고 관리됩니다.
+
+<br>
+
+- **this 바인딩**
+  - 전역 환경 레코드의 `[[GlobalThisValue]]` 내부 슬롯에 this가 바인딩되며, 일반적으로 내부 슬롯에는 전역 객체가 바인딩됩니다.
+  - 전역 코드에서 this를 참조하면 전역 환경 레코드의 `[[GlobalThisValue]]` 내부 슬롯에 바인딩 된 객체가 반환됩니다.
+
+<br>
+
+- **외부 렉시컬 환경에 대한 참조 결정**
+  - 현재 평가 중인 소스코드를 포함하는 외부 소스코드의 렉시컬 환경인 상위 스코프를 가리킵니다.
+
+<br>
+
+### 전역 코드 실행
+전역 코드가 순차적으로 실행됩니다. 이 때 실행 중인 실행 컨텍스트에서 식별자를 검색하고 어느 스코프의 식별자를 참조하면 되는지 결정하는 식별자 결정이 일어납니다.
+
+<br>
+
+### 함수 코드 평가
+함수가 호출되면 전역 코드의 실행을 일시 중단하고 함수 내부로 코드 제어권이 이동합니다. 그 후 아래의 순서로 함수 코드를 평가하죠.
+
+- **함수 실행 컨텍스트 생성**
+  - 함수 실행 컨텍스트를 생성합니다.
+  - 생성된 함수 실행 컨텍스트는 함수 렉시컬 환경이 완성된 다음 실행 컨텍스트 스택에 푸시됩니다.
+  - 즉, 실행 중인 실행 컨텍스트가 됩니다.
+
+<br>
+
+- **함수 렉시컬 환경 생성**
+  - 함수 렉시컬 환경을 생성하고 함수 실행 컨텍스트에 바인딩합니다.
+  1. 함수 환경 레코드 생성
+     - 함수 환경 레코드는 매개변수, arguments 객체, 함수 내부에서 선언한 지역 변수와 내부 함수를 등록하고 관리합니다.
+  2. this 바인딩
+     - 함수 환경 레코드의 `[[ThisValue]]` 내부 슬롯에 this가 바인딩되며, 일반 함수로 호출되면 this는 전역 객체를 가리킵니다
+     - 함수 내부에서 this를 참조하면 함수 환경 레코드의 `[[ThisValue]]` 내부 슬롯에 바인딩 된 객체가 반환됩니다.
+  3. 외부 렉시컬 환경에 대한 참조 결정
+     - 함수 정의가 평가된 시점에 실행 중인 실행 컨텍스트의 렉시컬 환경 참조가 할당됩니다.
+     - 자바스크립트 엔진은 현재 실행 중인 실행 컨텍스트의 렉시컬 환경인 상위 스코프를 함수 객체의 내부 슬롯 `[[Environment]]`에 저장합니다.
+
+<br>
+
+### 함수 코드 실행
+함수 코드가 순차적으로 실행됩니다. 이 때 식별자 결정을 위해 실행 중인 실행 컨텍스트의 렉시컬 환경에서 식별자를 검색하며, 검색된 식별자에 값을 바인딩합니다.
+
+<br>
+
+### 함수 코드 실행 종료
+실행 컨텍스트 스택에서 함수 실행 컨텍스트가 팝되어 제거되고, 전역 실행 컨텍스트가 실행 중인 실행 컨텍스트가 됩니다.
+
+<br>
+
+### 전역 코드 실행 종료
+실행할 전역 코드가 존재하지 않으면 전역 코드의 실행이 종료되며 전역 실행 컨텍스트도 팝되어 제거되므로 실행 컨텍스트 스택에는 아무것도 남지 않게 됩니다.
+
 <hr>
 <br>