Executive Context

자바스크립트에서 실행 컨텍스트는 세가지로 나뉜다.

 

1. global

2. functional

3. eval

 

global execution context JS코드 실행시에 생성되며 무조건 하나만 갖는다.

functional execution context는 함수 호출을 할때마다 스택에 쌓이며, 여러개 갖을 수 있다.

eval은 나오는 경우가 드물고, 사용해본 적 없기에 후에 다루겠습니다.

 

실행 컨텍스트는 후입 선출 구조로 스택에 쌓입니다. 스크립트 생명 주기 동안 모든 실행 스택을 저장하기

위함입니다.

 

자바스크립트 엔진은 두가지 단계로 실행컨텍스트를 만듭니다. 이는 전에 이야기한 호이스팅과 관련이있습니다.

1. Creation 단계

2. Execution 단계

 

1. Creation 단계에서는 다음의 세 과정을 거칩니다.

 

- Activation obj, variation obj 생성

생성 단계에서는 먼저 Activation Object와 Variation Object를 생성합니다. 여기서 activiation object는 varation object의 일종입니다. 그렇다면 왜 굳이 분리를해서 명명을 했는가? 하면 activation obj 는 global 영역에서의 variation obj입니다. 즉 전역 스코프 에서의 variation obj이기에 따로 명명했습니다. variation obj는 일반 함수 영역에서 생성됩니다.

 

- 스코프 체인 생성

스코프란 쉽게 말해 변수가 동작하는 유효한 영역입니다. 이것이 chain처럼 엮인 것이 스코프 체인입니다.

 

- this값 결정

 

 

아래 코드와 주석설명은 실행단계입니다.

a = 1;
// a는 선언을 하지 않았다. 원래라면 activation obj인데 선언을 하지 않았기에 생성 단계에서는
// a를 등록하지 않는다.

var b = 2;
// b는 var로 선언했기에 생성단계에서 activation obj로 undefined값을 넣어 등록한다.

// 함수 표현식으로 이루어진 cFunc는 생성 단계에서 정의되지 않습니다.
cFunc = function(e) {
  var c = 10;
  var d = 15;
  
  console.log(c);
  console.log(a); 
  
  function dFunc() {
    var f = 5;
    console.log(f)
    console.log(c);
    console.log(a); 
  }
  
  dFunc();
}

cFunc(10);

// 실행 단계

// 생성단계에선 아무것도 생기지 않았고 넘어왔습니다.
// 실행 단계에서 생성된 것이 있나 찾아보지만 없습니다.
// 그렇기에 global 실행 컨텍스트에 이를 추가하고 1로 초기화 해줍니다.
a = 1;


// b는 실행단계에서 호이스팅 되었습니다.
// 그렇기에 2를 넣어주면서 초기화합니다.
var b = 2;


// cFunc는 생성단계에서 정의 되지 않았으므로 실행단계에서 cFunc를 global에 넣어둡니다.
cFunc = function(e) {
// 34번째 줄에서 넘어왔습니다.
// 다시한번 create context 과정을 거칩니다.
local context가 생기고 그안에 c, d, dFunc가 undefined와 함수 기본 틀로 들어가 있습니다.

// undefined에 10이 채워집니다. (실행 컨텍스트)
  var c = 10;
  
 // undefined에 15가 채워집니다. (실행 컨텍스트)
  var d = 15;
  
  console.log(c); // 10
  console.log(a); // 1
  
  
  // 실행컨텍스트 시 넘어갑니다.
  function dFunc() {
  
  // 다시 한번 create context과정을 거치고 실행 컨텍스트 과정이 시작됩니다.
  
  // 생성과정에서 초기화 되었던 undefined를 5로 바꿉니다.
    var f = 5; 
    console.log(f) // 5
    console.log(c); //10
    console.log(a); // 1
  }
  
  // 실행 컨텍스트에서 실행됩니다.
  dFunc();
}

// cFuc를 호출하면 15번째 출로 가서 안의 내용을 실행합니다.
cFunc(10);

 

 

---

 

 

globalExecutionContextObj = {
  activationbj: {
      argumentObj : {
          length:0
      },
      b: 2,
      a: 1
  },
  scopeChain: [GLobal execution context variable object],
  this: value of this
}

cFuncExecutionContextObj = {
  activationbj: { 
  
  // argumentObj 가 생기는 이유는 실행 컨텍스트가 생기는 경우가 함수이기에 인자를 받기 위해서 생긴다. 
      argumentObj : {
          0: e,
          length:1
      },
      e: 10,
      c: 10,
      d: 15
      dFunc: Pointer to the function definition,
  },
  
  // scopeChain이 저장된다.
  scopeChain: [cFunc variable object, Global exection context variable object],
  this: value of this
}

 

 

출처 : https://medium.com/@happymishra66/execution-context-in-javascript-319dd72e8e2c