몰입! 자바스크립트 - 25장 실행 컨텍스트

1
2
3
4
5
6
7
8

function music() {}
music();

music EC = {
  LEC: {},
  VEC: {},
  TBC: {}
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

1. 글로벌 환경을 생성합니다.
2. ER을 생성하여 글로벌 환경에 첨부합니다.
3. OER을 생성하여 ER에 첨부합니다.
  - 빌트인 글로벌 오브젝트를 OER에 바인딩하기 때문에 NaN, Undefined
    Infinity, eval, parseInt 등을 사용할 수 있게 됩니다.
4. OLER를 생성하여 글로벌 환경에 첨부합니다.
  - 외부 렉시컬 환경이 없으므로 null입니다.
  - (저자생각) OLER에 null이 설정되므로 isNaN 함수를 실생하려면 EC를 빠져나가 빌트인 글로벌
    오브젝트에서 찾아야 합니다. 그런데 EC를 빠져나가면 종료되므로, EC안에서 찾기 위해 OER에
    바인딩하는 것으로 생각됩니다.
5. 글로벌 오브젝트를 생성합니다.
  - 글로벌 코드가 글로벌 오브젝트에 설정됩니다.
6. EC를 생성하고 엔진이 실행 컨텍스트 안으로 이동합니다.
  - 글로벌 코드를 파라미터 값으로 EC에 넘겨줍니다.
7. LEC를 생성합니다.
8. 생성한 글로벌 환경을 LEC에 첨부합니다.
9. VEC를 생성합니다.
10. 생성한 글로벌 환경을 VEC에 첨부합니다.
11. TBC를 생성합니다.
12. 생성한 글로벌 오브젝트를 TBC에 설정합니다.
  - 따라서 this.XXX를 통해 글로벌 오브젝트의 변수와 함수를 사용할 수 있게 됩니다.

1
2
3
4
5
6

debugger;
var aValue = 123;
function aSports() {
};
var aMusic = function() {};
aSports();

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

함수 선언문의 초기화
1. 엔진이 글로벌 코드의 첫 줄로 이동합니다.
2. 읽어가며 선언문을 찾습니다.
3. function aSports(){} 에서 Function 오브젝트를 생성합니다.
4. Function 오브젝트의 [[Scope]]에 글로벌 환경을 설정합니다.
  - 글로벌 코드에서 함수를 호출했을 때 호출된 함수의 OLDE에 설정하게 됩니다.
5. Function 오브젝트의 [[Code]]에 함수 코드를 설정합니다.
  - 글로벌 코드에서 함수를 호출했을 때 EC에 파라미터로 넘겨줍니다.
6. OER에 aSport Function 오브젝트를 설정합니다.
  - 시행중에 aSports()를 만나면 OER에서 식별자가 aSports이고 값 타입이 Function 오브젝트인
    프로퍼티를 찾아 호출합니다.
7. 다 찾으면 첫 줄로 다시 이동합니다.

변수, 함수 표현식 초기화
8. 순서대로 읽어가며 변수를 찾습니다.
9. aValue를 OER에 바인딩하고 값을 undefined로 설정합니다.
10. aMusic을 OER에 바인딩하고 값을 undefined로 설정합니다.
11. 다 찾으면 다시 첫 줄로 이동합니다.

글로벌 코드 실행
12. 순서대로 읽어가며 실행합니다. dubugger에서 멈춥니다.
13. aValued에 123을 할당한다.
  - LEC: {
      LE: {
        ER: {
          OER: {
            aValue: 123
          }
        },
      OLER: null,
      }
    }
14. function aSports(){} 문장은 건너 뛰고 var aMusic = function(){}; 으로 이동하여 Function
    오브젝트를 생성해 aMusic에 할당합니다.
15. aSports()를 만나 호출합니다.

1
2
3
4
5

var obj = {}
obj.music = function(one, two) {
  return one + two;
}
obj.music(10, 20);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

함수 코드 실행 환경 설정
1. EC를 생성합니다.
2. 3개의 파라미터를 갖고 EC안으로 들어갑니다.
3. LEC를 생성합니다.
4. VEC를 생성합니다.
5. TBC를 생성합니다.
6. 호출한 함수가 속한 오브젝트의 프로퍼티를 TBC에 설정합니다.
7. 새로운 LE를 생성합니다.
  - 오브젝트 인스턴스로 생성하면 프로퍼티를 공유하게 되지만 빌트인 형태의 렉시털 환경을 사용하여 
    인스턴스로 생성합니다.
8. ER을 생성하여 LE에 첨부합니다.
9. DER을 생성하여 ER에 첨부합니다.
  - 아직 함수 코드를 해석하지 않았으므로 빈 상태입니다.
10. OLER을 생성하여 LE에 첨부합니다.
11. 호출한 함수 오브젝트의 [[Scope]]를 OLER에 설정합니다.
12. LE를 LEC에 설정합니다.
13. LE를 VEC에 설정합니다.

1
2
3
4
5
6
7
8
9

var one = 11;
funcion sports() {
  var two, code, result;
  two = 22;
  code = "function soccer(){return this.one + two}; soccer()";
  result = eval(code);
  js.log(result);
}
window.sports();

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

sports 함수 실행 환경 설정
1. 함수가 호출되어 EC를 생성합니다.
2. 3개의 컴포넌트를 생성합니다.
3. TBC에 호출한 함수가 속한 오브젝트(window 이므로 글로벌 오브젝트)를 설정합니다.
4. 새로운 LE를 생성합니다.
5. ER과 OLER을 생성해 LE에 첨부합니다.
6. DER을 생성해 ER에 첨부합니다.
7. 호출한 함수의 [[Scope]]를 OLER에 설정합니다.
  - 글로벌 환경이 설정됩니다.
8. 생성한 LE를 LEC와 VEC에 설정합니다.

sports 함수 초기화, 실행
9. 초기화 단계에서 DER에 바인딩하고 초기값을 설정합니다.
  - var two, code, result;
10. 실행 단계에서 DER에 값을 할당합니다.
11. eval 코드를 실행합니다.

1
2
3
4
5

sports 실행 컨텍스트 상태
o LEC의 DER
o LEC와 VEC의 OLER
o VEC의 DER
o TBC

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

eval 코드 실행 환경 설정
1. 문자열을 코드로 간주하여 해석합니다.
2. EC를 생성합니다.
3. EC안으로 이동합니다.
  o eval 함수를 호출할 때의 EC가 오브젝트(obj) 파라미터 값이 됩니다.
  o eval 함수에 작성한 문자열이 코드 파라미터 값이 됩니다.
4. LEC를 생성합니다.
5. 파라미터로 받은 obj의 LEC를 LEC에 설정합니다.
6. VEC를 생성합니다.
7. obj의 VEC를 VEC에 설정합니다.
8. TBC에 설정합니다.
9. obj의 TBC를 TBC에 설정합니다.

1
2
3
4
5
6
7
8
9

function sports() {
  try {
    var check = member;
  } catch (e) {
    debugger;
    js.log(e.message);
    return 'catch 수행';
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

catch 블록에서 코드 처리
1. 새로운 EC를 생성하지 않습니다.
  - 현재 sports EC가 스택의 가장위에 있습니다.
2. sports EC의 LEC 사본을 만듭니다.
  - catch 문을 완료했을 때 원래 상태로 복원하기 위해서입니다.
3. 새로운 LEC를 생성합니다.
4. LE를 생성해 LEC에 첨부합니다.
5. ER을 생성해 LE에 첨부합니다.
6. DER을 생성해 ER에 첨부합니다.
  - catch 블록의 코드를 바인딩하지 않습니다. 따라서 빈 오브젝트입니다.
7. OLER을 생성해 LE에 첨부합니다.
8. sports EC의 LEC를 OLER에 설정합니다.
9. 파라미터 이름으로 Error 오브젝트를 DER에 설정합니다.
  - catch (e) { ... }
10. copyLEC를 LEC에 설정합니다.
11. catch 블록의 코드를 설정합니다.
12. catch 블록에서 반환한 값을 임시 영역에 저장합니다.
13. copyLEC를 sports LE에 설정해 복원한다.
14. 임시로 저장한 값을 반환한다.