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());
참고한 문서
- YDKJS 타입과 문법, 스코프와 클로저. 번역본 부록 B.1
- JavaScript 함수의 this 파헤치기 ― kidk.kr