[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 등 역시 바인딩하지 않습니다.
Author And Source
이 문제에 관하여([JS] Arrow Functions and this), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@lemuel0525/Arrow-Functions-and-this저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)