[JS] Arrow Functions and this

this 키워드를 메소드에서 사용하면 'this'의 값은 calling object가 됩니다.

그러나 Arrow Function은 기본적으로 이미 정의된 this 값을 호출 개체가 아닌 함수 자체에 바인딩합니다.

이 때 this의 값은 화살표 함수를 둘러싸는 lexical scope 또는 global scope에 존재하는 개체입니다. 화살표 함수는 일반 변수 조회 규칙(normal variable lookup rules)을 따릅니다.

const goat = {
  dietType: 'herbivore',
  makeSound() {
    console.log('baaa');
  },
  diet: () => {
    console.log(this.dietType);
  }
};
 
goat.diet(); // Prints undefined

위의 예에서 goat.diet()는 undefined를 출력하는데, this 키워드가 object를 호출하는 것이 아니라 global 범위의 this를 사용하기 때문입니다.

Arrow Function은 this뿐만 아니라 arguments, super, new.target 등 역시 바인딩하지 않습니다.