this binding은 어떻게 돌아갈까?

🙇‍♂️ 서론 🙇‍♂️

이 글은 개발한지 1년이 된 예비 주니어 개발자가 쓴 글로 오류가 있을 수 있습니다.
문제가 있거나 수정했으면 하는 부분은 댓글로 알려주시면 감사하겠습니다.

this란?

this는 이 메소드를 호출한 인스턴스를 가르킨다.

this binding?

javascript에서는 this binding이 다른 객체지향 언어와는 다르게 설정된다.
다른 언어들은 그 메소드를 호출한 인스턴스로 바로 잡히지만 javascript는 method로 호출하는지 혹은 함수로 실행하는지에 따라서 달라진다.

console.log(this); // Window {...}
const outerFunction = function(){
	console.log(this);
}
outerFunction(); // Window {...}
const testObj = {
	innerFunction = function(){
		console.log(this);
	}
}
testObj.innerFunction(); // testObj{...}
const test2Obj = {
	outerFunction = function(){
 		const innerFunction = function(){
		console.log(this);
	}
 		innerFunction(); // Window{...}
	}
}

위를 보면 4가지 상황이 나오게 된다.
1. 전역
전역은 기본적으로 Window에 this가 바인딩 된다. node라면 Global에 된다.
2. 인스턴스 안에서 메소드 호출
인스턴스 안에 있는 메소드는 인스턴스로 this가 바인딩 된다.
3. 함수 호출
일반적으로 함수만 호출할 경우에는 전역과 똑같이 바인딩 된다.
4. 인스턴스 안에 있는 메소드에서 만든 함수를 메소드에서 호출
인스턴스 안에 있는 메소드 안에서 함수를 호출할 경우에, 일반적으로 함수를 호출하는 것과 다름이 없다. 그래서 함수와 똑같이 바인딩 된다.