this란?

여러 호출 방식에 따라 정의가 달라지는 실행 함수의 호출자이다.
(너무 많고 다양한 의미로 부르기에, 내가 이해할 수 있는 언어로 작성했다.)

this 키워드의 상태는 크게 네 가지의 방식에 따라 나뉘는데,
함수 호출, 메소드 호출, 객체 생성 함수, (apply, call, bind) 이다.

그 전에, 바인딩에 대해서 짧게 설명하고 넘어가자.

바인딩

1. 변수와 값을 연결하는 과정을 의미
2. 메모리 공간의 주소를 변수에 할당하는 행위

함수 호출 방식

const func = function(){
	const name = "1";
	console.log(this);
	console.log(this.name);
}

func(); // 출력 : window 객체, 빈 값

• 일반적인 함수 내에서 this는 전역 객체(window)를 바인딩한다.
• this.name 처럼 함수 내에서 사용할 수 있는 변수가 있어도, window 객체의 key 값을 가져오게 된다.

메소드 호출 방식

const o = {
	prop: 55,
	foo: function() {
		return this.prop;
	}
}

console.log(o.f()) // 출력 : 37

• 객체 안에 있는 함수(메소드)에서의 this는 해당 메소드를 소유한 객체를 바인딩한다.
• this.prop 과 같이 같은 객체 안에 존재하는 다른 key에 접근 및 사용이 가능하다.

객체 생성 함수 방식

function getUserInfo(){
	this.name = "김준표",
	this.age = "26",
	this.tall = "186"
}

const user = new getUserInfo();

console.log(user); // {name: "김준표", age: "26", tall: "186"}

• 객체 생성 함수 호출 시에 this는 생성된 객체를 바인딩한다.
• let name, let age 처럼 변수로 만드는 방식은 성립할 수 없다.
  => 객체를 생성하는 함수이지, 일반적인 함수를 만드는게 아니기 때문이다.
• 또한, this로 값을 만들면 외부에서도 접근이 가능하다.
  (ex. console.log(user.name) // 김준표)

apply, call, bind 메소드 방식

• 메소드를 통해 특정 객체에 this를 명시적으로 바인딩 할 수 있다.