[JavaScript] 실행 컨텍스트와 this바인딩(this binding)

 

💡리마인드

- 실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다.
- 그 객체 안에는 3가지가 존재한다.
   ✓ VariableEnvironment
   ✓ LexicalEnvironment
   ✓ ThisBindings

---

상황에 따라 달라지는 this

this는 실행 컨텍스트가 생성될 때 결정된다. 이 말을 this를 bind한다(=묶는다) 라고도 한다. 다시 말하면 this는 함수를 호출할 때 결정된다.

1. 전역 에서의 this

런타임 환경에 따라 this는 window(브라우저 환경) 또는 global(node 환경)를 가리킨다.

런타임 환경?

여러분들이 javascript로 만들어놓은 프로그램이 구동중인 환경을 말하죠. 
우리는 node 파일이름.js로 vscode 상에서 구동하고 있으니 node 환경이라고 할 수 있구요. 
html 파일 안에 숨겨놓아서 크롬브라우저 등에서 연다고 한다면 브라우저 환경이라고 할 수 있겠네요.

=> 전역에서의 this는 브라우저에서는 window, Node환경에서는 global을 가리킨다.

// CASE1 : 함수
// 호출 주체를 명시할 수 없기 때문에 this는 전역 객체를 의미해요.
var func = function (x) {
	console.log(this, x);
};
func(1); // Window { ... } 1

// CASE2 : 메서드
// 호출 주체를 명시할 수 있기 때문에 this는 해당 객체(obj)를 의미해요.
// obj는 곧 { method: f }를 의미하죠?
var obj = {
	method: func,
};
obj.method(2); // { method: f } 2

 

2. 메소드로서 호출할 때와, 함수에서 호출할 때의 차이 => 호출하는 실행 주체에 따라 this가 달라진다.

1) 함수에서의 this => 전역 객체(window or global)

2) 메소드에서의 this => 호출의 주체

=> 따라서 함수를 독립적으로 호출 시에는 this가 항상 전역객체를 가리킨다.

=> 메소드 내부 함수에서도 예외없다. 메서드 내부의 함수 안에서 this를 호출할 경우, 기존 메소드 호출 주체에 대한 this의 정보를 잃고 전역객체를 참조한다. => 함수이기 때문

var obj1 = {
	outer: function() {
		console.log(this); // (1) obj1
		var innerFunc = function() {
			console.log(this); // (2) winodw 
		innerFunc();

		var obj2 = {
			innerMethod: innerFunc // (3) obj2
		};
		obj2.innerMethod();
	}
};
obj1.outer();

💡용어 기억
AS - IS => 기존 것 의미
TO - BE => 이후 것 의미

 

3. 화살표 함수에서의 this

ES6에서 처음 도입된 화살표 함수는, 실행 컨텍스트를 생성할 때 this 바인딩 과정 자체가 없다(따라서, this는 이전의 값이 유지된다. => 메소드 내부의 화살표 함수 안에서 this를 호출 할 때, this 바인딩 자체를 하지 않기 때문에, this의 참조 관계를 잃지 않고 기존의 메소드에서 참조한 호출 객체를 여전히 참조한다.

var obj = {
	outer: function() {
		console.log(this); // (1) obj
		var innerFunc = () => {
			console.log(this); // (2) obj
		};
		innerFunc();
	}
}

obj.outer();

=> ES6에서는 함수 내부에서 this가 전역객체를 바라보는 문제 때문에 화살표함수를 도입했다.

💡면접에서 일반 함수와 화살표 함수의 가장 큰 차이점은 무엇인가요? 
라고 물으면 > this binding 여부가 가장 적절한 답

 

4. 콜백 함수 호출 시 그 함수 내부에서의 this

=> 콜백 함수도 함수이기 때문에 그 함수 내부에서 this 호출 시 this를 잃고 전역 객체를 참조한다. (단, 콜백에서 화살표 함수 지정시 this 바인딩x 전역객체 참조x)

하지만 별도 예외로 this를 지정한 경우 그 대상을 참조한다. ex) addEventListener

// 별도 지정 없음 : 전역객체
setTimeout(function () { console.log(this) }, 300);

// 별도 지정 없음 : 전역객체
[1, 2, 3, 4, 5].forEach(function(x) {
	console.log(this, x);
});

// addListener 안에서의 this는 항상 호출한 주체의 element를 return하도록 설계되었음
// 따라서 this는 button을 의미함
document.body.innerHTML += '<button id="a">클릭</button>';
document.body.querySelector('#a').addEventListener('click', function(e) {
	console.log(this, e);
});

addEventListner 메서드는 콜백 함수 호출 시, 자신의 this를 상속하므로, this는 addEventListner의 앞부분(button 태그)이다.

 

5. 생성자 함수 내부에서의 this

생성자 : 구체적인 인스턴스 => class의 constructor나 생성자 함수에서의 생성자 함수 this.~가 들어있는..

=> 생성자 함수에서의 tihs는 항상 인스턴스를 지정한다.

var Cat = function (name, age) { //생성자
	this.bark = '야옹';
	this.name = name;
	this.age = age;
};

var choco = new Cat('초코', 7); //this : choco => 인스턴스
var nabi = new Cat('나비', 5);  //this : nabi

 

 

6. 명시적 this 바인딩

자동으로 부여되는 상황별 this의 규칙을 깨고 this에 별도의 값을 저장하는 방법

1. call / apply / bind

var func = function (a, b, c) {
	console.log(this, a, b, c);
};

// no binding
func(1, 2, 3); // Window{ ... } 1 2 3

// 명시적 binding
// func 안에 this에는 {x: 1}이 binding돼요
func.call({ x: 1 }, 4, 5, 6}; // { x: 1 } 4 5 6

2. 유사배열객체 => Array.from()

// 유사배열
var obj = {
	0: 'a',
	1: 'b',
	2: 'c',
	length: 3
};

// 객체 -> 배열
var arr = Array.from(obj);

// 찍어보면 배열이 출력됩니다.
console.log(arr);

3. bind( ) => 즉시 호출하지는 않고 미리 넘겨받은 this 및 인수들을 적용

var func = function (a, b, c, d) {
	console.log(this, a, b, c, d);
};
func(1, 2, 3, 4); // window객체

// 함수에 this 미리 적용
var bindFunc1 = func.bind({ x: 1 }); // 바로 호출되지는 않아요! 그 외에는 같아요.
bindFunc1(5, 6, 7, 8); // { x: 1 } 5 6 7 8

// 부분 적용 함수 구현
var bindFunc2 = func.bind({ x: 1 }, 4, 5); // 4와 5를 미리 적용
bindFunc2(6, 7); // { x: 1 } 4 5 6 7
bindFunc2(8, 9); // { x: 1 } 4 5 8 9

var obj = {
	outer: function() {
		console.log(this);
		var innerFunc = function () {
			console.log(this);
		}.bind(this); // innerFunc에 this를 결합한 새로운 함수를 할당
		innerFunc();
	}
};
obj.outer();

 

4. 화살표 함수는 실행 컨텍스트 생성 시, this를 바인딩 하지 않음

var obj = {
	outer: function () {
		console.log(this);
		var innerFunc = () => {
			console.log(this);
		};
		innerFunc();
	};
};
obj.outer();

 

 

 

* 위 내용은 스파르타 코딩클럽 JavaScript 문법 종합반 강의 내용입니다.