[JS] 📝 this ⭐

💡 this

JS의 this는 호출 시 동적으로 바뀔 수 있는, 실행 컨텍스트의 맥락적인 소유자를 가리킵니다.

this라는 네이밍이 상당히 부적절하게 적용된 사례로 보입니다.

바인딩 시점

🌠 실행 컨텍스트의 Creation Phase

함수가 선언될 때가 아닌, 호출되어 콜 스택에 쌓일 때 Function.prototype.call 메서드의 매개변수로 this가 전달됩니다.
(호출하는 방법에 따라 실행 컨텍스트의 this가 바뀔 수 있는 구조입니다.)

호출 방식별 this

호출 방식	this	예시	추가 설명
전역 공간에서 호출 (or 일반 함수 호출)	전역 객체 (Window / global)	printThis( );
메서드 형태로 호출	메서드를 호출한 객체	obj.printThis( );
Callback으로 호출	HoF 함수의 내부 구현에 따라 바뀜 (기본값 : 전역 객체)	hoF(printThis);	콜백함수를 매개변수로 넘길 때 .bind( ) 함수로 this를 고정시켜줄 수 있습니다.
생성자함수 호출	새로 만들어질 인스턴스 (객체)	function User( ) {   this.age = 20;   console.log(this); }; new User( );	new 연산자가 새로 만들어질 객체를 this로 바인딩시켜줍니다.

브라우저와 Node의 this 차이

	브라우저	Node
최상위 this	Window	module.exports
함수 기본 this	Window	global
전역변수 포함	✅	❌

this를 고정시키는 방법

1. call, apply, bind 함수 사용
   👉 call, apply는 함수 실행과 동시에 실행 컨텍스트에 일회성으로 원하는 this를 주입해서 사용할 수 있게 해줍니다.

   👉 bind는 실행은 되지 않으나, 실행 컨텍스트의 this를 고정시켜 줍니다. 호출할 때마다 바인딩하지 않아도 됩니다.

2. 클로저 활용
   상위 실행 컨텍스트의 변수 (self, _this, that 등) 에 this를 할당한 뒤 하위 실행 컨텍스트에서 클로저 형태로 가져와 사용합니다.

3. 화살표 함수 사용
   화살표 함수의 실행 컨텍스트는 this를 갖지 않으므로 스코프 체이닝이 일어나 클로저 형태로 상위 컨텍스트의 this를 가져다 씁니다.