1. 컨텍스트

컨텍스트에는 execution 컨텍스트와 lexical 컨텍스트 이렇게 2가지가 존재한다.

[ 실행 컨텍스트 ]

실행 맥락

실행 컨텍스트는 코드를 실행할 때 정의되는 환경, 즉 실행 가능한 코드가 실행되기 위한 필요한 환경이라 정의할 수 있다.

※ 실행 컨텍스트 = 전역 컨텍스트(함수를 제외한 환경) + 함수 컨텍스트(함수 호출시 함수 환경)

실행 컨텍스트를 통해 함수 인자의 parameter, argument 나 this 정의, Scope Chain 에 대한 정의가 이루어 진다.

실행 컨텍스트의 처리과정

[ 렉시컬 컨텍스트(정적 컨텍스트) ]

어휘 맥락

렉시컬 컨텍스트는 코드를 작성하는 시점에 정의되는 환경

그냥 우리가 코드로 보는 그 자체의 시점

const person = {
  name: 'kim hee tae',
  age: 20,
  getAge() {
    return this.age;
  }
};

person.age; // 20
person.getAge(); // 20

const age = person.getAge;
age(); // undefined
// 전역 컨텍스트에 age에 할당된 값은 없다.

age.call(person); // 20
// 
class Persons {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
    this.getAge = this.getAge.bind(this); // (D)
  }
  
  getAge() {
    return this.age;
  }

  getName = () => { // (F)
    return this.name;
  }
}

const p2 = new Persons('heetae', 25);

// (A)
p2.getAge(); // 20

// (B)
const myAge = p2.getAge;
//myAge(); // undefined

// (C)
// execution 컨텍스트의 특성 활용
// - call(p2)
const myAge2 = p2.getAge;
myAge2.call(p2); // 25

// (D)
// execution 컨텍스트의 특성 활용
// - bind(this)
const myAge3 = p2.getAge;
myAge3(); // 25

// (E)
// (D 의 bind(this) 를 제외한 상태에서)
// execution 컨텍스트의 특성 활용
// - bind(p2)
const myAge4 = p2.getAge;
myAge4.bind(p2);   // ƒ getAge() { return this.age; }
myAge4.bind(p2)(); // 25

// (F)
// lexical 컨텍스트의 특성 활용
// - arrow function
const myName = p2.getName;
myName(); // heetae

💡JavaScript의 성격