this란?

this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다.

자바스크립트의 this는 함수를 호출할 때, 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다.

함수 호출 방식에 따른 this에 바인딩되는 객체

기본

전역객체는 모든 객체의 유일한 최상위 객체를 의미한다. 일반적으로 브라우저에서의 전역객체는 window 이며, **서버(node.js)**에서의 전역객체는 global 이다.

// 브라우저
console.log(this); // window

// node.js
console.log(this); // global

전역객체는 전역 스코프를 가지는 전역변수를 프로퍼티로 소유한다.

const globalFn = () => {
	console.log('call globalFn');
}

window.globalFn(); // call globalFn
this.globalFn(); // call globalFn

일반함수 호출

일반함수를 호출하면 this는 전역객체에 바인딩 된다.

// 함수 선언식
function funcDeclaration () {
	console.dir(this);
}
funcDeclaration(); // window

// 함수 표현식
const funcExpressions = () => {
	console.dir(this);
}
funcExpressions(); // window

메서드 호출

메서드를 호출하면 기본적으로 this는 해당 메서드를 가지고있는 객체에 바인딩 된다.

단, 메서드가 화살표 함수로 작성되었을 경우, 화살표 함수의 this는 상위 컨텍스트의 this를 계승받기 때문에 this가 전역객체에 바인딩 된다.

const obj = {
	foo: function() {
		console.log('foo this:', this);
	},
	bar() {
		console.log('bar this:', this);
	},
	baz: () => {
		console.log('baz this:', this);
	},
}

obj.foo(); // obj
obj.bar(); // obj
obj.baz(); // window