[Javascript] 모던 자바스크립트 Deep Dive - 22, 23장 this, 실행컨텍스트

해당 내용은 [모던 자바스크립트 Deep Dive] 도서의 핵심 내용을 정리한 글 입니다.

 

 

💡 this 키워드

---

this란?

자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다.

this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다.

this 바인딩은 **함수 호출 방식에 의해 동적으로 결정**된다.

 

✨ 함수 호출 방식과 this 바인딩

함수가 어떻게 생겼든 간에 이 함수를 어떻게 호출하느냐에 따라 안에있는 this에 바인딩되는 값이 달라진다!!

// foo 함수
const foo = function(){ console.log(this) }

 

함수 호출 방식

1. 일반 함수 호출 : this → 전역객체
      1. 일반 함수로 호출된 모든 함수(중첩 함수, 콜백 함수 포함)

// 일반 함수로 호출
foo() // this => 전역객체

        
2. 메서드 호출 : this → 자신을 가리키는 객체

const obj = {foo}
// 메서드로 호출
obj.foo() // this => obj

        
3. 생성자 함수 호출 : this → 생성될 인스턴스

// 생성자 함수로 호출
new foo() // this => 생성될 객체

 

• 함수 앞에 new 키워드를 붙여서 호출하면 생성자 함수 호출

4. Function.prototype.apply/call/bind 메서드에 의한 간접 호출 : this → 내가정함

const bar = { name:bar }
foo.call(bar) // this => bar
foo.apply(bar) // this => bar
foo.bind(bar)() // this => bar

 

함수 안에 있는 this를 이 객체로 지정하겠다

 

💡 실행컨텍스트

---

소스코드의 타입

• 전역코드
• 함수코드
• eval 코드
• 모듈코드

소스코드의 평가와 실행

• 자바스크립트 엔진은 소스코드를 소스코드의 평가와 소스코드의 실행 과정으로 나누어 처리한다.
• 소스코드 평가
  • 실행컨텍스트 생성
  • 변수, 함수 등의 선언문만 먼저 실행하여 스코프(렉시컬 환경의 환경 레코드)에 등록
• 소스코드 실행
  • 선어문 제외한 소스코드 순차적으로 실행
  • 소스코드에 필요한 정보는 스코프에서 검색해서 취득

✨ 실행 컨텍스트의 역할

• 선언에 의해 생성된 모든 식별자(변수, 함수, 클래스 등)를 스코프를 구분하여 등록하고 상태변화를 지속적으로 관리한다.
• 스코프 중첩 관계에 의해 스코프 체인을 형성한다. 스코프 체인을 통해 상위 스코프로 이동하며 식별자를 검색할 수 있다
• 현재 실행 중인 코드의 실행 순서를 변경하고 다시 되돌아갈 수 있도록 한다.

실행 컨텍스트 스택

• 실행 컨텍스트 스택
  • 생성된 실행 컨텍스트를 관리하는 스택 자료구조
• 실행 컨텍스트 처리 과정
      1. 전역 코드의 평가와 실행
          1. 전역 실행 컨텍스트를 생성 & 푸시 > 전역 코드 평가 > 전역 코드 실행
      2. foo 함수 코드의 평가와 실행
          1. foo 함수 호출 > foo 함수 실행 컨텍스트 생성 & 푸시 > foo 함수 코드 평가 > foo 함수 실행
      3. bar 함수 코드 평가와 실행
          1. bar 함수 호출 > bar 함수 실행 컨텍스트 생성 & 푸시 > bar 함수 코드 평가 > bar 함수 실행
      4. foo 함수 코드로 복귀
      5. 전역 코드로 복귀 

✨ 렉시컬 환경

• 실행 컨텍스트를 구성하는 컴포넌트
• 식별자와 식별자에 바인딩된 값, 상위 스코프에 대한 참조를 기록하는 자료구조
• 환경 레코드와 외부 렉시컬 환경에 대한 참조로 구성된다
  • 환경 레코드
    • 스코프에 포함된 식별자를 등록하고 등록된 식별자에 바인딩된 값을 관리하는 저장소다. 소스코드 타입에 따라 관리하는 내용에 차이가 있다
    • 객체 환경 레코드와 선언적 환경 레코드로 구성된다.
    • 외부 렉시컬 환경에 대한 참조
      • 상위 스코프를 가리킨다. 렉시컬 환경에 대한 참조를 통해 단방향 링크드 리스트인 스코프 체인을 구현한다.
    • 객체 환경 레코드
      • var 키워드, 함수 선언문으로 정의한 함수
      • 선언 단계와 초기화 단계가 동시에 진행 ⇒ 호이스팅 O
    • 선언적 환경 레코드
      • let, const, 표현식
      • 선언 단계와 초기화 단계가 따로 진행 ⇒ 호이스팅 참조 에러
      • 초기화 단계 도달하기 전까지를 일시적 사각지대라고 함

 

✨ 실행 컨텍스트의 생성과 식별자 검색 과정

1. 전역객체 생성
2. 전역 코드 평가
   1. 전역 실행 컨텍스트 생성
   2. 전역 렉시컬 환경 생성
      1. 전역 환경 레코드 생성
      2. 선언적 환경 레코드 생성
   3.  this 바인딩
   4. 외부 렉시컬 환경에 대한 참조 결정

• 스코프체인 동작 원리
  • 실행 중인 실행컨텍스트의 렉시컬환경에서 식별자를 검색할 수 없으면 외부 렉시컬 환경에 대한 참조가 가리키는 렉시컬 환경, 즉 상위 스코프로 이동하여 식별자를 검색한다

실행 컨텍스트와 블록 레벨 스코프

• 함수 호출할 때 함수 실행 컨텍스트가 생성되면, 블록 레벨 스코프에서는 실행 컨텍스트가 어떻게 생기지?
• for문의 변수 선언문에 let 키워드를 사용한 for문은 코드 블록이 반복해서 실행될때마다 코드 블록을 위한 새로운 렉시컬 환경을 생성한다.