[JavaScript] this

this 의 값은 함수를 호출한 방법에 의해 결정됩니다.

뭔 소리일까?
예시를 보자

const ex1 = {
  name: 'a',
  getName: function() {
    console.log('this호출', this);
  }
}

ex1.getName() // this호출 {name: 'a', getName: f } (1)


const ex2 = ex1.getName;
ex2(); // this 호출 window { window ...} (2)


const ex3 = {
  name: 'b',
  getName: ex1.getName
}
ex3.getName(); // this호출 {name: 'b', getName: f} (3)

-----------------------------------------------------
  
//html
<button id="button">this호출</button>

//js
const btn = document.getElementById("button");
btn.addEventListener("click", ex1.getName); //this호출 <button id="button">this호출</button>< (4)

• (1)과 같이 this를 호출한 getName()앞에 . 앞에는 ex1이 있다! 즉, this를 호출한건 ex1이다. 따라서 ex1객체가 예시와 같이 출력된다.

• (2)에서는 호출한 ex2() 앞에는 아무것도 없다. 즉 윈도우가 this를 호출한 것이다. 따라서 윈도우 객체가 예시와 같이 출력된다.

• (3)에서는 호출한 getName()앞에 있는 것은 ex3. 따라서 ex3 객체 속 함수가 ex1.getName일지라도 ex3객체 자체가 출력된다.

• (4)에서는 getName을 호출한 것은? 버튼이다! 버튼이 eventListner를 통해서 ex1.getName을 호출한 것. 따라서 호출한 버튼 태그가 출력되게 된다.

원하는 대로 호출하기 위해 고정시키는 방법 => bind

...

const bindGetName = ex3.getName.bind(ex1) // ex3의 getName을 ex1으로 고정 시키겠다
bindGetName(); //this호출 {name: 'a', getName: f} (1)


const btn = document.getElementById("button");
btn.addEventListener("click", ex1.getName(ex1)); //this호출 {name: 'a', getName: f} (2)

• (1)에서 만약 ex3.getName였다면 처음 예시와 같이 ex3객체인 'b'가 출력되었을 것이다. 하지만 bind를 통해 ex1객체로 고정시켜주었기 때문에 'a'가 출력된다.
• (2)에서도 처음 예시와 같이 버튼 태그가 출력되는 것이 아닌, bind로 고정시킨 ex1객체가 출력된다.

화살표 함수에서의 this

화살표 함수에서의 this는 함수가 속해있는 곳의 상위 this를 계승 받는다.

const testCar = {
  name: "benz",
  getName: function () {
    console.log("getname", this);
    const innerFunc = function(){
      console.log("inner", this);
    }
    innerFunc();// inner windw{window: ...} (2)
  }
  testCar.getName();//getname {name" benz", getName:f} (1)

• (1)은 위 예시들과 같이 getName을 호출한 testCar객체가 출력된다.
• 하지만 (2)를 보면 testCar안에서 함수를 호출했다고 할지라도, innerFunc를 호출한 것은 앞에 아무것도 없기때문에 window객체가 호출된다.

testCar와 그 안에 있는 innerFunc에서 같은 객체값이 출력되게 하려면? => 화살표 함수를 이용한다.

const testCar = {
  name: "benz",
  getName: function () {
    console.log("getname", this);
    const innerFunc = () => {
      console.log("inner", this);
    }
    innerFunc();// inner {name" benz", getName:f} (2)
  }
  testCar.getName();//getname {name" benz", getName:f} (1)

• 화살표 함수는 this가 그 상위 this를 계승 받기 때문에!!!

• 또한 화살표함수는 바인딩을 제공하지 않는다.

this를 쓸 때 어떤 함수를 써야하나?

=> bind를 통해 원하는 객체를 지정해주기 위해 일반함수를 쓰자.

하지만 함수 안에 있는 함수같은 경우에 같은 this를 쓰는 상황이라면 화살표 함수를 써도 괜찮다.

출처
https://www.youtube.com/watch?v=tDZROpAdJ9w
유튜브 영상을 바탕으로 정리한 내용입니다.