이력

  • 2022.02.10 포스팅 ​ ​모든 내용을 상세히 담으려 하지 않았습니다.
    제가 모르는 부분이나, “이런 것도 있었어?” 하는 부분, 중요하다고 생각되는 부분,
    다시 한번 되새기고 싶은 부분만 기록했습니다.
    읽어주셔서 감사합니다.

24.1 아키텍처, 메커니즘 접근

  • 이 장에서는 js 엔진이 코드를 어떻게 처리하는지 다룹니다.
  • 함수가 호출되면 함수 안으로 js 엔진이 이동한다. 이때 엔진은 준비, 초기화, 실행 단계로 나누어 처리합니다. 렉시컬 환경이 준비 단계이고, 실행 컨텍스트(Execution Context)가 초기화 단계와 실행단계 입니다.
  • 렉시컬 환경이 개념 중심의 메커니즘이고 다음 장의 실행 컨텍스트가 구현 중심의 메커니즘 입니다.

24.2 실행 컨텍스트 개요

  • 함수가 호출되면 js 엔진은 호출된 함수 안으로 들어가 코드를 해석하고 실행합니다. 해석한 결과를 저장하고 함수 코드를 실행할 영역이 필요한데, 이 영역은 실행 컨텍스트(Execution Contexts)라고 합니다. 함수가 호출되면 우선 EC를 이 안에서 함수 안의 코드를 해석하고 실행합니다.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

실행 컨텍스트 처리
1. 함수를 호출
2. 실행 컨텍스트 생성
3. 렉시컬 환경 컴포넌트 생섬
4. 변수 환경 컴포넌트 생성
5. this 컴포넌트 생성
6. 호출한 함수 앞에 작성한 오브젝트(없으면 글로벌 오브젝트)를 this 바인딩 컴포넌트에 설정한다.
   this.xxx 호출이 가능해진다.
7. 렉시컬 환경을 생성한다.
8. 환경 레코드를 생성하여 렉시컬 환경에 첨부한다.
9. 외부 렉시컬 환경 참조를 생성하여 렉시컬 환경에 첨부한다.
10. Function 오브젝트의 [[Scope]]를 외부 렉시컬 환경 참조에 첨부한다.
11. 렉시컬 환경을 렉시컬 환경 컴포넌트와 변수 환경 컴포넌트에 설정한다.
12. 호출한 함수의 파라미터 값을 호출된 함수의 파라미터 이름에 매핑한다.
13. 함수 선언문을 Function 오브젝트로 생성
14. 함수 표현식과 변수에 초깃값을 설정
15. 함수 안의 자바스크립트 코드를 실행한다.

24.3 렉시컬 환경

  • Lexical Env. 는 js 코드의 실행환경, 범위를 구조적으로 엮으면서 독립적으로 실행하기 위한 메커니즘으로 ES5 스펙상의 입니다.
  • { name: value } 형태로 저장하여 이름과 값을 묶어줍니다. js 엔진은 함수의 초기화 단계에서 해석한 함수가 변수를 식별할 수 있도록 {name: value} 형태로 기록하며 그곳이 LE 입니다.
  • 이름이 없으면 기록할 수 없으므로 이름이 없는 함수는 바로 실행되도록 해야 하며 자바스크립트는 이를 위한 메커니즘을 제공합니다.
1
2
3
4

LE = {
  ER: 값, // 함수, 변수 기록
  OLDER: 값,  // caller의 Scope
}
  • 이름을 찾을 때 ER에서 찾고 없으면 OLER에서 찾습니다. 외부의 스코프에 바로 접근할 수 있으므로 속도가 빠릅니다.

24.4 외부 렉시컬 환경참조

1
2
3
4
5
6
7

형성과정
1. 함수를 호출한다.
2. EC를 생성한다.
3. LE를 생성한다.
4. ER을 생성하여 LE에 첨부한다. (함수 코드를 해석하기 전이기 때문에 값을 설정하지는 못한다.)
5. OLER 생성하여 LE에 첨부한다.
6. OLER에 참조값을 설정한다. (이 시점에 Function 오브젝트의 [[Scope]]에 접근가능하기 떄문에 설정가능)
  • ES3에서는 식별자를 찾지 못하면 스코프 체인을 통해 근접한 스코프에서 찾았으나, ES5는 LE를 통해 근접한 스코프에 바로 접근가능하기 때문에 빠르다.

24.5 스코프와 외부 렉시컬 환경 참조

24.6 환경레코드(ER)

  • 함수안에 작성한 함수와 변수를 사용하기 위해서는 js 엔진이 인식할 수 있는 영역에 기록해야 한다. 기록하는 곳이 LE의 ER이다.
  • 함수, 변수 이름을 식별자라고 하며 ER에 식별자를 기록하는 것을 바인딩이라고 한다. ER에서 식별자를 찾는 것을 식별자 해결(Identifier Resolution)이라고 하며 해결의 전반적인 규칙을 Rules라고 한다.
1
2
3
4
5
6
7

LE = {
  ER: {
    DER(Declarative Env. Record): {}, // Function, 변수, catch
    OER(Object Env. Record): {}, // 글로벌 오브젝트의 변수, 함수, with
  }
  OLDER: {}
}

24.7 선언적 환경 레코드 DER

  • 함수, 변수, catch 문이 대상입니다. 함수안의 코드를 해석하기 전에 먼저 DER을 생성한다. 함수코드를 실행하기 위한 준비입니다.
  • 함수를 호출하면 엔진은 우선 EC를 생성한다. 그리고 LE를 생성하며 ER, DER, OER, OLER을 생성하여 첨부합니다.
  • 함수와 변수는 DER에 바인딩 되지만 코드해석 전이기 때문에 값이 설정되진 않습니다.

24.8 오브젝트 환경 레코드

  • 글로벌 오브젝트와 with문이 OER의 대상입니다. 글로벌 오브젝트와 with문의 처리가 달라 분리하여 다룹니다. 이번 장에서는 with문을 다룹니다.
1
2
3
4
5
6

LE = {
  ER: {
    OER(Object Env. Record): {}, // 글로벌 오브젝트의 변수, 함수, with
  }
  OLER: {}  // 처음 실행할 때의 LE, with문을 여러번 실행하더라도 동일한 OLER을 참조한다
}
  • strict모드 사용시 with문을 에러가 발생합니다. with문은 OLER은 동일하나 with 문을 실행할때 마다 EC, LE를 생성하기 때문에 ES5가 추구하는바에 맞지 않기 때문입니다.

23.9 글로벌 환경

  • 글로벌 환경은 글로벌 오브젝트를 위한 LE입니다. 프로그램 전체를 통해 하나만 존재하며 함수로 생성하는 LE와 형태가 같습니다.
1
2
3
4
5
6

LE = {
  ER: {
    OER(Object Env. Record): 글로벌 오브젝트 바인딩
  }
  OLER: null // 처음 실행할 때의 LE, with문을 여러번 실행하더라도 동일한 OLER을 참조한다
}
  • 자바스크립트가 렌더링을 시작하면 자바스크립트 실행 환경(빌트인 오브젝트, 빌트인 타입 등)을 설정한 후 글로벌 환경을 생성합니다.
1
2
3
4
5
6
7

글로벌 환경 형성 과정
1. 글로벌 환경을 생성합니다. LE = {} 형태입니다.
2. ER를 생성하여 첨부합니다.
3. OER을 생성하여 첨부합니다.
4. OLER을 생성하여 첨부합니다.
5. 글로벌 오브젝트를 생성합니다.
6. 글로벌 오브젝트의 함수와 변수를 OER에 바인딩합니다.
  • 글로벌 환경운 동적으로 함수와 변수를 바인딩합니다. 함수와 변수의 추가, 변경이 수시로 발생할 수 있으므로 OER을 사용합니다.