Execution Context와 Javascript 작동원리

이연중·2021년 7월 2일

Javascript

목록 보기
1/6

Execution Context


실행 가능한 코드를 실행하기 위해 필요한 환경

실행 가능한 코드

  • 전역 코드: 전역 영역에 존재하는 코드
  • Eval 코드: eval 함수로 실행되는 코드
  • 함수 코드: 함수 내에 존재하는 코드

전역 코드함수 내 코드가 일반적인 실행 가능한 코드

실행에 필요한 여러가지 정보

  • 변수: 전역, 지역, 매개 변수, 객체 프로퍼티
  • 함수 선언
  • scope
  • this

자바스크립트 엔진은 실행에 필요한 정보들을 형상화하고 구분짓기 위해 실행 컨텍스트를 객체의 형태로 관리

실행 컨텍스트의 3가지 객체

Variable Object(VO/변수 객체)


  • Variable Object(VO/변수 객체): 실행에 필요한 여러 정보들을 담은 객체변수

  • 매개변수(parameter)와 인수 정보(arguments)

  • 함수 선언

VO는 실제로 값을 가지며, 다른 객체를 가리킨다. 그리고 전역 코드와 함수 내 코드를 실행할 때, 내용이 다르기 때문에 각각 가리키는 객체는 다르다

  • 전역 코드의 전역 컨텍스트

    VO가 유일하며, 최상위에 위치하고 있고, 모든 전역 변수, 전역 함수 등을 포함하는 전역 객체를 가리킴

  • 함수 내 코드의 함수 컨텍스트의 경우

    VO는 활성 객체를 가리키고, 매개변수와 인수들의 정보를 배열의 형태로 담고 있는 arguments object가 추가

Scope Chain


  • Scope Chain: 전역 컨텍스트나 함수 컨텍스트가 참조할 수 있는 변수, 함수 선언 등의 정보를 담고 있는 전역 객체, 활성 객체의 리스트를 가리킴

    자바스크립트 엔진은 스코프 체인을 통해 렉시컬 스코프를 파악한다. 중첩 함수의 경우 부모 함수의 스코프가 자식 함수의 스코프 체인에 포함이 된다. 자신의 컨텍스트의 스코프 체인이 가리키는 첫번째 AO에 없으면, 그 다음, 그 다음이 없으면 그 다음.... 전역 스코프까지 참조가 가능하다.

this value


  • this value: this의 값이 할당된다. 값은 함수 호출 패턴에 의해 결정

Execution context 생성 과정


var x= 'x'

function foo(){
    var y= 'y'
    
    function bar(){
        var z= 'z'
        console.log(x+y+z)
    }
    bar()
}
foo()

위 코드를 실행하게 되면, 실행 컨텍스트는 아래와 같이 Call Stack에 추가되고, 소멸된다

  1. 전역 코드 진입: 컨트롤이 실행 컨텍스트에 진입하기 전 유일한 전역 객체가 생성

  2. 전역 객체 생성 후 전역코드로 컨트롤이 진입하면, 전역 실행 컨텍스트가 생성되고 콜스택에 쌓임

  3. 실행 컨텍스트 생성 후 가장 먼저 스코프 체인의 생성 및 초기화가 진행

  4. 스코프 체인의 생성 및 초기화 진행 후, 변수 객체화 실행(variable instantiation: VO에 프로퍼티와 값을 추가). 전역 코드의 경우에 VO는 GO를 가리킴

    변수 객체화 실행 과정

    함수 코드의 경우 매개변수가 VO의 프로퍼티로, 인수가 값으로 설정 -> 함수: 대상 코드 내 함수 선언의 함수명은 VO의 프로퍼티로, 생성된 함수 객체(function object)는 값으로 설정(함수 호이스팅)(함수 표현식 제외), 변수: 일반 변수 방식을 따름. 대상 코드 내 변수 선언을 대상으로 변수명이 VO 프로퍼티로, undefined가 값으로(변수 호이스팅)(var 키워드로 선언된 변수의 경우)

  5. 생성된 함수 객체는 [[scopes]] 프로퍼티를 가진다. 해당 프로퍼티는 함수 객체만이 소유하는 내부 프로퍼티로 함수 객체가 실행되는 환경을 가리킨다.(현재 실행 컨텍스트의 스코프 체인이 참조하고 있는 객체를 값으로 설정)

    [[scopes]]는 자신과 외부 함수의 실행환경, 전역 객체를 가리키며, 외부 함수의 실행 컨텍스트가 소멸해도 [[scopes]] 프로퍼티가 가리키는 AO는 소멸하지 않고 계속 참조할 수 있다(클로저)

  6. 변수 선언 처리가 끝나면, this value가 결정. this value가 결정되기 전에는 전역 객체를 가리키고 있다가 함수 호출 패턴에 의해 this 에 할당되는 값 결정

    여기까지가 코드 실행전의 과정

  7. 코드가 실행되고 변수 할당문에 도달하면 변수에 값이 할당. 변수에 값 할당시, 현재 실행컨텍스트의 스코프 체인이 참조하고 있는 VO 0번째부터 검색해 해당 변수명에 해당하는 프로퍼티가 발견되면, 값 할당

  8. 전역 코드의 함수가 실행되기 시작하면, 새로운 함수 실행 컨텍스트가 생성. 컨트롤은 해당 함수 실행 컨텍스트로 이동하고, 스코프 체인 생성 및 초기화 -> VI 실행 -> this value 결정을 순차적으로 진행

    전역 코드의 전역 실행 컨텍스트와 다른 점은 위의 과정이 함수 코드의 룰로 적용된다는 것이다.

    ※ 함수 코드의 룰 적용

    스코프 체인의 생성 및 초기화: AO(Activation Object)를 스코프 체인의 0번째가 참조하게 함. AO는 arguments 프로퍼티를 초기화 함. 그 후, 전역 실행 컨텍스트의 스코프 체인이 참조하고 있는 객체가 스코프 체인에 push(스코프 체인의 0번째에는 AO 1번째에는 GO 참조)

    VI 실행: 스코프 체인 생성 및 초기화 단계에서 생성된 AO를 VO로서 실행

    this value 결정: 전역 객체를 가리킴(GO)

참고

https://poiemaweb.com/js-execution-context

profile
Always's Archives

0개의 댓글