This란?(Call, Bind, Apply)

#This란?📌

객체지향언에서 일반적으로 this라는 예약어는 함수가 속해 있는 객체 자기 자신을 가리키는 것이다.
그러나 자바스크립트에서는 자기 자신이라는 말이 상당히 모호하다.
자바스크립트는 일급 객체인데, 일급객체의 정의는 다음과 같다.

변수나 데이터에 할당할 수 있다.
다른 함수를 인자로 전달 받는다.
다른 함수의 결과로서 리턴될 수 있다.

이러한 자바스크립트의 특징으로 인해, 자바스크립트 함수는 다양한 환경에서 호출될 수 있다. 그러므로 자바스크립트에서 this는 함수를 호출하는 방법에 따라 달라지게 된다. 다음의 코드를 보자.

const person = {
	name : "JeongWoo",
    whoami:function() {
    //이름 : function()은 메소드
    	console.log(this);
    }
};
person.whoami();
const myname = person.whoami;
myname();

위의 코드를 봤을 때, 결과적으론 person.whoami();와 myname();가 같다.
하지만 실제로 출력했을 때는, person.whoami()는 객체인 person을 출력하고 myname()은 window를 출력한다.

this가 결국 호출한 대상(객체)이기 때문이다(this === 호출한 대상)
person.whoami()에서 this를 사용하는 whoami를 호출한 대상은 person이기에 this가 person을 가리키고, whoami를 불러내는 myname()를 호출한 대상은 전역(window)이기 때문에 window를 출력한다.

#Bind란?📌

this를 누가 호출하는가와 무관하게 this를 고정시키는 것을 bind라고 한다.

	const person = {
    	name : "JeongWoo"
    }
  	function whoami (){
    	console.log(this);
  	}
  	const myname = whoami.bind(person);
    whoami();
    //window 출력
	myname();

위의 코드는 bind를 이용하여 myname의 this를 person으로 고정시킨 것이고, 실행시키면 person이 출력이 된다.

객체의 정보는 다음과 같이 업데이트할 수 있다.

	const person = {
    	name : "JeongWoo"
    }
  function whoami (birth, gender){
    	this.birth = birth;
      this.gender = gender;
      console.log(this)
  };
  const myname = whoami.bind(person, 95, "남");
  myname();

#Call이란?📌

Call은 모든 함수에서 사용할 수 있으며, this를 특정값으로 지정할 수 있다. 아래의 코드를 보면 call을 쉽게 이해할 수 있다.

	const person = {
    	name : "JeongWoo"
    }
  	function whoami (){
    	console.log(this);
  	}
  	whoami();
  	whoami.call(person);

위의 코드를 실행시키면 whoami();는 window를 가리키고, whoami.call(person)는 call을 사용하여 this로 사용할 객체를 넘기므로 person을 출력하게 된다.

또한 객체의 정보를 다음과 같이 업데이트하여 사용할 수도 있다.

	const person = {
    	name : "JeongWoo"
    }
  function whoami (birth, gender){
    	this.birth = birth;
      this.gender = gender;
      console.log(this)
  };
  whoami.call(person, 95, "남");

#Apply란?📌

apply는 함수 매개변수를 배열로 받으며, 그 외에는 Call과 완전히 같다.

	const person = {
    	name : "JeongWoo"
    }
  function whoami (birth, gender){
    	this.birth = birth;
      this.gender = gender;
      console.log(this)
  };
  whoami.apply(person, [95, "남"]);