컨텍스트에는 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의 성격