Lexical this

화살표 함수는 function의 키워드의 줄임말로 흔히 언급된다. 하지만 완전히 다른 점으로는 this가 지칭하는 동적 스코프 규칙 대신에 자신과 가장 가까운 함수의 스코프에서 this 값을 받아온다.

const person = {
  weight: 100,
  getWeight: () => this.weight,
};

console.log(person.getWeight());

출력 값은 undefined이다. 왜냐하면 위 경우는 멤버 함수 getWeight 를 둘러싼 함수 스코프가 존재하지 않아서 this가 빈 객체{}를 갖게 되기 때문이다.

const person = {
  weight: 100,
  getWeight: function() { return this.weight },
};

console.log(person.getWeight());

function 키워드로 멤버 함수 getWeight 를 선언했으면 this는 person 인스턴스를 제대로 가리켜서 100을 정상적으로 출력 했을 것이다.

원래 의도하는 결과를 화살표 함수로 나오게 할려면 객체가 아닌 함수로 getWeight를 둘러싸야 한다.

function person() {
  this.weight = 100;
  this.getWeight = () => this.weight;
}

const npc = new person();
console.log(npc.getWeight());

참고한 문서