[TIL]201126

슬지로운 개발생활·2020년 11월 26일

Scope & Closure TIL summary

TIL

목록 보기

42/73

1. STUDY

그림 참조 페이지

Execution Context(실행 컨텍스트)

Types of Execution Context

Global Execution Context
Functional Execution Context
Eval Function Execution Context
처음 코드를 실행(브라우저가 스크립트를 로딩하여 실행하는 것)하는 순간 전역 컨텍스트(global execution context)가 생성되고, execution stack(콜스택)의 가장 아래 위치하게 된다.
→ 모든 실행 컨텍스느의 가장 베이스에서는 Global Execution Context가 존재!

선입선출

함수 호출 시마다 컨텍스트 생성 후, 콜 스택의 바닥에 삽입한다.
함수 실행 후(리턴한 후) 스택에서 제거 된다.
그림 참조 페이지

Execution Context Components

LexicalEnvironment
VariableEnvironment

This Binding

Execution context in ES5ExecutionContext = {
  VariableEnvironment : { ... },
  LexicalEnvironment : { ... },
  ThisBinding: <this value>
}

This Binding
전역 실행 컨텍스트에서, this의 값은 전역 객체를 참조한다.
(브라우저일 시, 윈도우 객체 참조)

함수 실행 컨텍스트에서, this의 값은 함수가 어떻게 호출되는지에 달렸다. 만약 객체 참조로부터 호출되면, this의 값은 해당 객체로 set 되고, 그렇지않을 경우, 전역 객체 또는 undefined(strict 모드)로 set 된다.

const person = {
  name: 'peter',
  birthYear: 1994,
  calcAge: function() {
    console.log(2018 - this.birthYear);
  }
}
person.calcAge(); 
// 'this' 는 'person'을 참조한다.
//왜냐하면, 'calcAge'는 'person' 객체 참조로 호출됐기 때문이다.

const calculateAge = person.calcAge;
calculateAge();
// 'this' 는 전역 윈도우 객체를 참조한다.
// 왜냐하면, 아무럼 객체 참조도 주어지지 않았기 때문이다.

Key Point
Execution context 2가지 단계를 가지고 있다.

Creation Stage(생성 단계) : context는 생성이 됐지만 호출이 안됐을 때
- VariableEnvironment component는 변수, arguments, 함수선언문을 초기저장하기 위해 쓰인다. var로 선언된 변수들은 undefined로 변수 초기화 한다.
- This의 값이 결정된다.
- 생성 스테이지에서 LexicalEnvironment은 VariableEnvironment를 카피한다.
Execution Stage(실행 단계)
- 값들이 할당된다.
- LexicalEnvironment은 bindings을 푸는데 쓰인다.

Lexical Environment

Environment Record(환경 레코드) : 모든 지역변수를 프로퍼티로 저장하고 있는 객체.
Outer Lexical Environment(외부 렉시컬 환경) : 외부 코드(부모)를 참조.

var x = 10;

function foo(){
  var y = 20;
 console.log(x+y); // 30
}


// Environment는 기술적으로 2가지 메인 구성요소가 존재한다:
// environmentRecord, and a reference to the outer environment

// global context의 Environment
globalEnvironment = {
  environmentRecord: {
    // built-ins
    // our bindings:
    x: 10
  },
  outer: null // no parent environment
};

// "foo" function의 Environment
fooEnvironment = {
  environmentRecord: {
    y: 20
  },
  outer: globalEnvironment
};

VariableEnvironment :

변수, arguments, 함수선언문을 초기저장하기 위해 쓰인다.
~~(나중에 context가 활동하는 단계로 들어갈때 채워진다.) → 말들이 다 다르다. 추후 더 공부하고 수정 계획~~

function foo(a) {
  var b = 20;
}
foo(10);
  
// creation stage때의 foo함수의 VariableEnvironment 구성요소 
fooContext.VariableEnvironment = {
  environmentRecord: {
    arguments: { 0: 10, length: 1, callee: foo },
    a: 10,
    b: undefined
  },
  outer: globalEnvironment
};
  
// execution stage이후, VE envRec가 값으로 채워진다.
fooContext.VariableEnvironment = {
  environmentRecord: {
    arguments: { 0: 10, length: 1, callee: foo },
    a: 10,
    b: 20
  },
  outer: globalEnvironment
};