Javascript: this 시작하기

🙋🏻‍♀️ this 어디서부터 어떻게 이해할까?

this 는 현재 작업 공간인 current execution context 를 가리킨다.

일단 현재까지 배운 런타임은 browser 와 node.js 두 가지가 있다. 런타임은 프로그래밍 언어가 실행되는 환경이라고 간주한다. 전역 범위에서 this 를 프린트하면, 전역 객체를 가리킨다. browser 에서는 window, node 환경 에서는 그와 같은 역할을 하는 global 객체를 가리킨다.

단, node 환경에서 화살표 함수 속 this === module.exports 이므로, 화살표 함수에서 this 사용은 지양한다.

// node 환경이라고 간주할 때, 
const fruit = function() { return this };
const vegies = () => { return this }; 

fruit(); // global
vegies(); // module.exports

🙋🏻‍♀️ 역동적인 this의 예제

// 임의의 변수
let tryMe; 

// 생성자 함수
function flower(name, colour) {
	this.name = name; 
	this.colour = colour; 
	tryMe = this; 
}

// 인스턴스 생성에 따른, this 를 캡처하는 tryMe 변수 값의 변화
let rose = new flower('rose', 'pink'); 
tryMe; // { name: 'rose', colour: 'pink' }

let lily = new flower('lily', 'white'); 
tryMe; // { name: 'lily', colour: 'white' }

let fake = flower('fake', 'grey'); // 문법이 틀렸으므로 인스턴스 생성 실패
fake; // undefined; 
tryMe; // 브라우저상 window 또는 노드상 global. flower 가 유효 함수로서 호출되기는 했기 때문

🙋🏻‍♀️ this 는 한 마디로,

함수가 실행될 때, 해당 scope 마다 생성되는 고유한 실행 환경(execution context) 이다. 따라서 위 예제에서처럼 this 의 의미가 계속 변화하는 것이다.