JS의 this

00_8_3·2022년 12월 27일

실행 컨텍스트와 렉시컬 환경, 스코프 체인

리터럴 오브젝트는 실행 컨텍스트를 생성하지 않는다.

객체의 메서드가 실행될 때 실행 컨텍스트가 생성된다.
메서드가 화살표 함수인 경우 this는 상위 실행 컨텍스트의 렉시컬 환경을 따른다.
오브젝트의 내부 메서드가 실행 될 때 실행 컨텍스트가 생성된다.
렉시컬 환경과 렉시컬 스코프

렉시컬 환경(lexical environment): 실행 컨텍스트의 한 구성 요소로, 변수와 함수 선언을 저장하며 현재 실행되는 코드의 스코프를 관리합니다. 렉시컬 환경은 환경 레코드(environment record)와 외부 렉시컬 환경 참조(outer lexical environment reference)로 구성됩니다. 환경 레코드는 실제로 변수와 함수 선언을 저장하는 곳이며, 외부 렉시컬 환경 참조는 상위 스코프를 참조하는 포인터입니다.

렉시컬 스코프(lexical scope): 프로그램의 소스 코드 구조에 따라 정의되는 변수의 접근 권한과 가시성을 결정하는 스코프 규칙입니다. 렉시컬 스코프는 코드가 작성된 시점에 결정되며, 중첩된 함수는 자신이 선언된 렉시컬 환경에 대한 참조를 유지합니다. 이로 인해 클로저(closure)라는 현상이 발생할 수 있습니다.

1 실행컨텍스트 구성

실행 컨텍스트는 LexicalEnvironment 와 VariableEnvironment로 구성
Lexical Environment는 Environment Record와 Reference to the outer environment로 구성되어 있다.

1.1 Environment Record

Environment Record는 아래와 같이 구성되어 있다.

                                           Environment Record
                                                    |
                    -----------------------------------------------------------------
                    |                               |                               |
        Declarative Environment Record     Object Environment Record     Global Environment Record
                    |
            --------------------------------
            |                              |
Function Environment Record     Module Environment Record

1.1.1 Function Environment Record

Function Environment Record에는 this, super, new.target 등의 정보가 초기화된다.
화살표 함수는 this가 명시적 바인딩 된다 -> 상위 실행 컨텍스트의 렉시컬 환경을 따른다. -> 자신만의 Function Environment Record를 생성하지 않는다.

1.1.2 Module Environment Record

Module Environment Record는 ECMAScript 모듈에 대한 정보를 기록하고 관리하는 렉시컬 환경 구성 요소입니다. ES6부터는 모듈이 추가되어 코드를 더욱 구조화하고 관리하기 쉽게 만들 수 있습니다.
각 모듈은 자체 스코프를 갖고 있으며, 모듈 스코프 내에 선언된 변수, 함수, 클래스 및 기타 바인딩은 기본적으로 해당 모듈 내에서만 사용할 수 있습니다.

모듈 내에서 선언된 변수, 함수, 클래스 등의 바인딩을 관리합니다.
모듈에서 다른 모듈로 내보낼(export) 바인딩을 추적합니다. 이를 통해 다른 모듈에서 해당 바인딩을 가져올(import) 수 있습니다.
다른 모듈에서 가져온(imported) 바인딩을 추적합니다. 이를 통해 가져온 바인딩이 올바르게 참조되고 업데이트되는지 확인할 수 있습니다.
Module Environment Record는 모듈간의 종속성 및 바인딩 관리에 중요한 역할을 하며, 코드의 모듈화 및 구조화에 기여합니다.

1.1.3 Object Environment Record

Object Environment Record는 실제 JS 객체를 데이터 구조로 사용하는 환경 레코드입니다.
객체의 모든 속성이 바인딩이 되고 그 반대도 마찬가지입니다. 전역 환경은 "바인딩 객체"가 전역 객체인 객체 환경 객체를 가집니다.
Nodejs에서는 전역 객체가 global이며, Object Environment Record를 통해 global의 속성에 접근할 수 있습니다.

1.1.3.1 gpt 질문

2023 03 16 추가

1.2 Reference to the outer environment

Reference to the outer environment는 실행 컨텍스트가 첫 실행되었으면 null 아니면 상위 컨텍스트 실행의 포인터를 가르킨다.

코드

'use strict'

function global() {
    console.log("0", this);
 }
 global(); // Window {...}


// const value = 1
this.value = 1

const object = {
    value: 10,
    method: function() {
        // 객체 리터럴은 실행 컨텍스트가 없는데
        // 내부 메서드가 실행 되는 경우에 실행 컨텍스트가 생성된다.
      // 실행 컨텍스트의 `Function Environment Record`에 object의 this가 바인딩 된다.
      console.log("1 ", this) // 암시적 바인딩 (런타임) 동적
   },
   arrowFnMethod: () => {
     // 상위 실행 컨텍스트의 렉시컬 env 
     // ,즉 object의 렉시컬 env
     // 컴파일 타임, 정적 , 명시적 바인딩
    console.log("2 ", this); 
  },
  methodWithArrowFn: function () {
     const arrowFn = () => console.log("3 ",this);
     arrowFn();
  },

  funcD: function() {
    // console.log("fundD :", this)

    const a = () => {
        // funcD에 명시적 바인딩이 된다.
        // 그리고 funcD는 암시적 바인딩이 된다. obj에
        console.log("this :", this) 
    }
    setTimeout(a, 100)
  }
 }