this

---

"실행컨텍스트가 활성화 됐을 때 ThisBinding은 실행 된다. "

실행 컨텍스트가 생성되는 순간에 this 를 바인딩한다. 그렇다면, 실행컨텍스트는 언제 생성 될까? 바로 해당 컨텍스트에 해당하는 함수가 호출되는 순간에 생성 된다. 그 말인 즉슨, this는 함수가 호출될 때 결정된다는 의미이다. this 는 정적으로 코드만 봤을 때 바로 예측할 수 있는 것이 아니라, 해당 함수를 어떤 식으로 호출했느냐에 따라서 얼마든지 달라질 수 있다. 즉, 동적으로 바인딩 된다는 의미이다.

ThisBinding은 함수가 호출될 때 결정되고(실행 컨텍스트가 생성되는 순간), 호출하는 방식에 따라 다르다.

호출하는 방식에 따라 this 가 달라진다는 뜻은 무엇을 의미할까? 위의 표를 확인해보자.

전역 공간에서 this 는,

"전역 객체"를 가리킨다.

브라우저에서는 window, node.js 에서는 global 이라는 객체를 가리킨다. 전역 컨텍스트를 실행하는 주체가 바로 전역객체이기 때문이며, 이 전역 객체를 host 객체라고도 한다.

브라우저에서 console.log(this) 를 출력하면 window 이라는 객체를 출력하고
node.js 에서 console.log(this)를 출력하면 global 이라는 객체를 출력한다.

이 window 와 global 은 ECMAScript 에서 정의한 객체가 아니며, ECMAScript가 나름의 방식으로 정의해놓은 '전역 객체' 내용에 따라서 '런타임에서 제공하는 구현체' 이다. 그리고, 각 host 환경에서 정의한 바에 따라서 전역 객체의 구체적인 내용이 달라진다.

## 함수 호출시에 **this** 는, ### "전역 객체"를 가리킨다.

함수를 호출할 때에도 this 는 '전역 객체'를 가리킨다니 이건 무슨 의미일까? 아래의 예시를 보자.

함수를 실행하는 순간에 이 함수를 실행해주는 '주체'가 누구인지를 생각하면 이해하는 게 좀 쉽다. 위의 예시에서 a 라는 함수를 전역 공간에서 호출했기 때문에, this 는 전역 객체를 가리키게 되기 때문이다. 이번엔 다른 예시를 살펴보자.

function b() {
	function c() {
		console.log(this);
	}
	c();
}

b();

c 함수를 담아서 c 함수를 호출하고 있는 b 라는 함수를 호출한다면 어떨까? 첫 번째 예시에서는 a라는 함수를 호출하는 주체가 '전역 객체' 이기에 this가 전역 객체라는 것은 쉽게 이해가 가능하다. 하지만 위의 예시에서는 c 함수를 b 함수 내부에서 호출했기 때문에 첫 번째 예시와는 다른 결과 값을 얻을 수 있을 것만 같다. 결과는 어떨까.

c 함수를 호출한 주체가 b 함수라고 생각했던 것과는 다르게, this는 여전히 '전역 객체'를 가리키고 그것을 출력하고 있는 걸 알 수 있다. 약간은 혼란스럽겠지만 이후에 이러한 문제점을 해결하기 위한 대체 개념(arrow function)이 ES6 에서 등장하기 때문에 걱정은 하지 않아도 된다. 다만 함수로써 호출했을 때 this는 무조건 그리고 언제나 '전역 객체'를 가리킨다는 것만은 기억하고 있자.

📍 앞에서 거론했듯이 이러한 결과가 문제라는 의견이 다분하기 때문에 ECMAScript 6 에서는 아예 thisBinding을 하지 않는 arrow function 이라는 개념이 등장하게 되었다. 이 arrow function은 바로 위 컨텍스트에 있는 this 를 그대로 가져다 사용한다.

let d = {
    e: function() {
        function f(){
            console.log(this);
        }
        f();
    }
};
d.e();

d 객체 안에 e 라고 하는 메서드가 존재하고, 메서드로서 e를 호출한다면 어떻게 될까?

e 메서드 안에 f 라고 하는 내부 함수가 있고, this를 콘솔에 출력하는 이 내부 함수를 호출했을 때 역시 마찬가지로 window 전역 객체가 출력된다. 왜 그럴까?

this를 개발자 도구에 출력하는 함수인 f를 어떻게 호출하고 있는지(호출한 형태)만 보면 된다. 어쨌든 함수로써 호출했기 때문에 this는 '전역 객체'를 가리키게 되는 것이다.

메서드 호출시에 this 는,

"메서드 호출 주체(메서드명 앞)"를 가리킨다.

메서드로 호출 했을 때의 this 는 메서드를 호출한 주체, 즉 메서드를 누가 호출했느냐에 따라 달라진다. 예시를 보자.

a.b()를 호출해서 b 함수 내부의 this를 출력해보면 아래와 같은 결과가 나온다. { b: function() { console.log(this) }} 와 똑같이 생긴 결과 값이다. 이 결과 값이 의미하는 것은 말 그대로 a.b()를 호출해서 console.log(this) 를 출력했을 때의 this는 a 라는 뜻이다. 아래의 출력인 { b: function() { console.log(this) }} 는 곧 a 값의 값이기 때문이다.

예시의 a.b() 처럼 . 이 있다면 앞의 객체의 메서드로써 . 뒤에 있는 것이 메서드로써 호출했다는 뜻이 된다. 다시 말해, a.b() 는 b 함수를 a 객체의 메서드로써 호출한 것이다.

📍 객체지향 언어에서 메서드는 인스턴스(객체)와 관련된 동작을 의미한다. 그리고 인스턴스는 어떤 클래스에 속하는 '객체'라는 뜻이기에, 아예 Javascript 에서는 클래스가 아니더라도 객체이기만 하면 어떤 객체와 관련된 동작을 뜻하는 말로 범위를 확장시켰다. 즉, 클래스의 인스턴스인지 여부와는 상관 없이 객체와 관련된 동작이기만 하면 '메서드'라는 것이다.

객체 a의 b 값으로 할당한 function()은 원래는 함수이지만 객체와 관련된 동작을 하게 되면 메서드로서 기능한다는 뜻이다. 다른 예시도 살펴보자.

이번에는 a.b.c()를 호출했다. 이때 c 라는 함수 안에서 this를 호출하면 this 는 a.b 가 된다. 결과를 보면, c: f() 는 { c: function() { console.log(this) } } 를 의미한다. 즉, c 함수에 a.b 라는 객체와 관련된 동작을 수행하라는 명령을 한 것이다.

ex) obj.b() 의 경우, this는 obj 를 가리킨다.
ex) obj['func']() 의 경우, this는 obj 를 가리킨다.
ex) person.info.getName() 의 경우, this 는 person.info 를 가리킨다.
ex) person.info['getName']() 의 경우, this 는 person.info 를 가리킨다.
ex) person['info']['getName']() 의 경우, this 는 person['info'] 를 가리킨다.

메서드 함수 내에서의 우회법?

이전에 살펴보았던 코드 예시에서,

메서드 안에 내부 함수가 있고 해당 함수를 호출했을 때 그 내부의 this 역시 '전역 객체'를 가리키는 것은 여러모로 이상하고 문제가 있다고 말했었다. 이러한 문제를 방지하기 위해서 우리는 '우회법'이라는 것을 사용해볼 수 있다. (arrow function은 조금 뒤에 설명할 것이니 걱정하지 말자!) 아래의 예시를 함께 보면서 이 우회법에 대해 설명해보려고 한다.

let a = 10;
let obj = {
	a: 20,
	b: function(){
		console.log(this.a); // 20 출력
		
		function c() {
			console.log(this.a);
		}
		c(); // 10 출력
	}
}

obj.b();

예제 코드를 보면 obj.b()가 메서드로써 호출이 됐다. 그러니, b에서의 this 는 당연히 obj가 될 것이고, this.a는 obj에서 가리킨 a의 값, 20이 출력될 것이다. 아래의 내부 함수인 c 함수는 동일하게 this.a를 출력하고 있지만, 내부에서 c를 함수로써 호출하고 있으므로 this는 '전역 객체'가 되며, 전역에서 선언한 a 변수의 값 10이 출력 될 것이다. 그러니까 obj의 프로퍼티 a의 값을 출력하라고 했더니 '전역 변수' a의 값(window.a)을 주는 것이다.

아무튼 c 함수 내부에서 우리가 가리키고자 하는 this.a 의 this 가 '전역 객체'(window)가 아니라, obj 여야 한다면, 어떻게 해야 하는 걸까?

아쉽게도 현재까지는 call, apply, 같은 명시적인 this 바인딩 명령을 쓰지 않고서는 this 자체를 직접 다른 값으로 덮어 씌울 수 없다. 그러니 c 함수에서 this를 사용하면, 기본적으로는 '전역 객체'를 가리킬 수 밖에 없다는 뜻이 된다.

우회법

let a = 10;
let obj = {
	a: 20,
	b: function(){
		let self = this;
		console.log(this.a); // 20 출력
		
		function c() {
			console.log(self.a);
		}
		c(); // 20 출력
	}
}

obj.b();

위의 코드를 보면, 우리는 앞에서 배운 스코프 체인을 이용하고 있음을 알 수 있다. 즉, 내부 함수보다 상위에서 self 라고 하는 변수에 this 를 담고, c 함수 내부에 this 대신 a에 접근해서 사용하고 있다. 이렇게 되면, 내부 함수 c는 자신의 LexicalEnvironment 에서 this 대신 self 를 찾고(상위에서 설정했기 때문에 자신에겐 없을 것이다.) 다시 outerEnvironmentReference 를 타고 외부(상위)의 b 함수의 LexicalEnvirionment 에서 self를 찾는다. self 에는 앞서 들어온 this 가 담겨있을 것이고, 이때의 this 는 obj.b()를 메서드로써 호출할 때의 this 이기에 obj를 가리킬 것이다. 이렇게 되면, 함수로써 호출한 c 함수 내부에서의 this 역시, 메서드로써 호출할 때와 동일한 this 를 가리킬 수 있게 된다.

ES6 arrrow function

let a = 10;
let obj = {
	a: 20,
	b: function(){
		console.log(this.a); // 20 출력
		
		const c = () => {
			console.log(this.a);
		}
		c(); // 20 출력
	}
}

obj.b();

ES6 에서는 this 를 바인딩하지 않는 arrrow function 이 등장했는데, 이를 사용하면 앞에서 했던 방식처럼 우회법을 사용하지 않아도 된다. this를 바인딩하지 않기 때문에 스코프 체이닝 상의 this에 바로 접근할 수 있게 되기 때문이다.

b: function(){
	console.log(this.a); // 20 출력
		
	const c = () => {
		console.log(this.a);
	}
	c(); // 20 출력
}

c 라는 arrow function 에서 가리키는 this는 바인딩하지 않기 때문에 상위에 있는 this를 그대로 사용하고, 20을 출력하게 된다.

📍 앞서 언급했던 것처럼, ES5 에서도 call 이나 apply 같은 방법으로 간단하게 처리할 수 있다.

callback 호출시 this 는,

callback 호출시 this 는,

기본적으로는 '함수 호출 시에' 처럼 함수 내부에서와 동일하게 전역 객체를 가리키지만, 콜백 함수를 어떤 식으로 처리하는지에 따라서 (.call, .bind(), apply() 등) this는 얼마든지 달라질 수 있다. 예를 들어, .bind() 를 사용해서 사용자가 직접 this를 명시할 수도 있다.

명시적으로 this를 바인딩하는 세 가지 방법

1. .call
2. .bind()
3. apply()

function a(x, y, z) {
	console.log(this, x, y, z);
};

let b = {
	bb: 'bbb'
};

a.call(b, 1, 2, 3);
a.apply(b, [1, 2, 3]);

let c = a.bind(b);
c(1, 2, 3);
let d = a.bind(b, 1, 2);
d(3);

위의 결과를 보면 동일한 결과가 출력된다. a.call(b, 1,2,3)인 경우, console.log(this, 1,2,3) 를 출력했을 때 { bb: 'bbb' } 1 2 3 이 나왔다. 즉 this 는 변수 b를 가리키는 걸 알 수 있다. a.apply(b, [1,2,3]) 도 마찬가지다. 배열로 넘긴 각각의 요소들이 매개변수 x, y, z로 넘어가고, this는 변수 b를 가리키고 있다. c 의 경우, a에 b를 bind 하고 그 후에 c를 다시 호출해주는 형태다. 그 말인즉슨, 변수 c에 담는 a.bind(b) 까지는 아직 호출이 되지 않고 this를 그저 들고 있는 상태라고 유추해볼 수 있다. 그리고 c를 호출해줌으로서 처음에 넘겨준 this를 들고 있던 상태에서 나머지 인자들이 들어갔다고 볼 수 있다. d 를 보면 조금 더 확실해진다. 처음에는 this인 b 와 첫 번째, 두 번째 매개변수 까지 넘겨주었지만 아직 실행은 하지 않은 상태이다. 이렇게 별개의 bind된 함수를 만들어놓은 상태에서 d를 호출하면서 나머지 세 번째 매개변수를 추가한다. 그러니까 먼저 this와 1, 2 는 들어가있는 상태에서 3을 다시 넘김으로써 실제 함수를 호출하는 게 된다.

bind

func.bind(thisArg[, arg1[, arg2[, ...]]])

apply

func.bind(thisArg[, arg1[, arg2[, ...]]])

call

func.call(thisArg[, arg1[, arg2[, ...]]])

MDN 공식문서 출처 : Function.prototype.bind()
MDN 공식문서 출처 : Function.prototype.apply()
MDN 공식문서 출처 : Function.prototype.call()

콜백함수 정리

ex) this를 명시적으로 바인딩하지 않았을 때

let callback = function() {
  console.dir(this); // window 전역객체
};

let obj = {
  a: 1,
  b: function(cb) {
    cb(); // 함수로써 호출
  }
}

obj.b(callback);

ex) this를 명시적으로 바인딩 했을 때

let callback = function() {
  console.dir(this); // obj 출력
};

let obj = {
  a: 1,
  b: function(cb) {
    cb.call(this); // obj를 this로 넘김
  }
}

obj.b(callback);

• 콜백함수 내부에서의 this 는 콜백함수 자체에서 뭘 어떻게 할 수 있는 것이 아니라, 해당 콜백함수를 넘겨 받는 대상이 매개변수로 넘겨받은 콜백함수를 어떤 식으로 처리하느냐에 따라서 this 는 달라진다.
• 첫 번째 로직에서 callback 함수를 넘겨받은 대상이 cb를 그냥 함수로써 호출했을 때는 당연히 전역객체가 this로 출력되지만, callback 함수를 넘겨받은 대상이 cb.call로 this를 넘겨준다면 그때는 obj가 this가 된다. 그 말인 즉슨, 위의 코드에서의 callback 이라는 함수를 실행하는데 this는 obj 로 해야한다는 명령을 내린다면 obj가 this로 출력되는 것이고, 이렇게 명시적으로 this를 바인딩하지 않으면 전역객체가 this로 출력된다는 의미이다.
• 콜백 함수에서의 this는 지정하는 바에 따라서 그때그때 달라진다.

ex) this를 명시적으로 바인딩하지 않았을 때

let callback = function() {
  console.dir(this);
};

let obj = {
  a: 1,
}

setTimeout(callback, 100)

ex) this를 명시적으로 바인딩 했을 때

let callback = function() {
  console.dir(this);
};

let obj = {
  a: 1,
}

setTimeout(callback.bind(obj), 100)

• this는 기본적으로 함수의 this 와 같다.
• 그러나, 제어권을 가진 함수가 콜백의 this를 지정해둔 경우도 있다. 그런 경우에는 그 함수가 지정해준 this를 따르게 된다.
• 개발자가 this를 바인딩해서 콜백을 넘기면 그에 따른다. (ex. function(){}.bind(this))
  
  

생성자 함수 호출시 this 는,

(추가 작성 예정)

생성자함수 호출시,

(추가 작성 예정)

✦ 출처

---

🚨 해당 포스팅은 정재남의 ⌜코어 자바스크립트⌟ 강의와 동명의 책을 베이스로 한 기록입니다.
🔖 표와 그림은 전부 제가 한땀한땀 그린 것입니다.. 불펌 자제 🥸