TIL #8 This

하루 하나씩 작성하는 TIL #8

---

This란?

• 다른 객체지향 언어에서의 this는 곧 클래스로 생성한 인스턴스이다. 그러나 자바스크립트에서는 this가 어디에서나 사용될 수 있다.

• 브라우저 환경 this 확인

console.log(this);
console.log(window);
console.log(this === window);

• node 환경 this 확인

console.log(this);
console.log(global);
console.log(this === global);

• this의 할당

// 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

• 함수로서의 호출과 메서드로서의 호출 구분 기준 : . []

var obj = {
	method: function (x) { console.log(this, x) }
};
obj.method(1); // { method: f } 1
obj['method'](2); // { method: f } 2

호출 결과는 같다

• 메서드 내부에서의 this

var obj = {
	methodA: function () { console.log(this) },
	inner: {
		methodB: function() { console.log(this) },
	}
};

obj.methodA();             // this === obj
obj['methodA']();          // this === obj

obj.inner.methodB();       // this === obj.inner
obj.inner['methodB']();    // this === obj.inner
obj['inner'].methodB();    // this === obj.inner
obj['inner']['methodB'](); // this === obj.inner

호출을 누가 했는지에 대한 정보가 담겨있는 모습

• 메서드의 내부 함수에서의 this

var obj1 = {
	outer: function() {
		console.log(this); // (1) obj1
		var innerFunc = function() {
			console.log(this); // (2), (3) 전역객체, obj2
		}
		innerFunc();

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

메서드의 내부라고 하여도, 함수로서 호출한다면 this는 전역 객체를 의미한다.

this 바인딩에 관해서는 함수를 실행하는 당시의 주변 환경(메서드 내부인지, 함수 내부인지)은 중요하지 않고, 오직 해당 함수를 호출하는 구문 앞에 점 또는 대괄호 표기가 있는지가 관건이라는 것을 알 수 있다.

• 화살표 함수(=this를 바인딩하지 않는 함수)

일반 함수와 화살표 함수의 차이 = this binding 여부

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

obj.outer();