화살표 함수 this(arrow function this)

자바스크립트에서 this는 보통 함수를 호출한 주체가 무엇인지에 따라 결정된다.

 

그리고 함수는 보통 자신만의 this를 갖고 있다.

 

하지만 화살표 함수만큼은 기존의 this와 다른 점이 있다. 

 

그래서 일반 함수와 화살표 함수에서 this의 다른 점이 무엇인지 정리해보겠다.

 

 

 

 

 화살표 함수는 부모의 this를 받아온다. 

일반 함수는 함수를 호출한 주체 또는 자신의 this(즉, 자신을 포함하고 있는 주체. 여기서는 return으로 반환된 객체)를 갖는다. 그래서 일반 함수를 사용하며 부모의 this를 받아오기 위해서 종종 bind 메서드를 활용하게 된다. 

 

하지만 화살표 함수는 부모의 this를 받아오기 위해 bind를 할 필요가 없다.

왜냐하면 이미 부모의 this를 받아오는 것이 화살표 함수이기 때문이다.

 

그러면 부모의 this를 받아오는지 코드를 통해 정리해보겠다.

function testThis() {
  this.name = "m9";
  
  return {
      name: "이름이 변경되었습니다",
      arrowFunction: () =>{
          console.log(this.name);
      },
      normalFunction: function(){
        console.log(this.name);
      }
  };
}

const test = new testThis();
test.arrowFunction();  //결과: m9
test.normalFunction(); //결과: 이름이 변경되었습니다.

testThis함수에서 return으로 객체를 반환한다.

그 객체에는 화살표 함수를 값으로 가지고 있는 'arrowFunction'과 일반 함수를 값으로 가지고 있는 normalFunction이 있다.

 

그래서 결과를 보자면,

 

일반 함수에 this.name은 객체의 name 값 즉, '이름이 변경되었습니다' 를 참조한다. 

하지만 화살표 함수는 부모의 this를 참조하기 때문에 this.name 은 testThis의 'm9'이 출력되게 된다.