es6 addeventlistener - 정의되지 않은 'classList'속성을 읽을 수 없습니다.

Question

버튼을 클릭 할 때 클래스를 토글하여 색상을 변경하는 addEventListener 화살표 함수가 있습니다. 내 콘솔에서

var clickButton = document.getElementById("clicker"); 

clickButton.addEventListener("click", =>() { 
    this.classList.toggle("modified"); 
}, false); 

: 그 아래 보이는

var clickButton = document.getElementById("clicker"); 

clickButton.addEventListener("click", function() { 
    this.classList.toggle("modified"); 
}); 

작품을 완벽하게 : 그것은 재미있는 부분

Uncaught TypeError: Cannot read property 'classList' of undefined at HTMLButtonElement.

은 다음과 같은 스탠드 JS 기능이 변환입니다. 나는 arrow 함수 버전이 classList를 정의되지 않은 이유를 이해하지 못합니다.

classList은 ES6 화살표 기능에서 어떻게 작동합니까?

Answer 1

이 문맥의 화살표 함수는 this을 요소에 바인딩하지 않으며 어휘 적으로 바인딩됩니다. 결과적으로 화살표 함수 예제에서는 this이 clicker 요소에 바인딩되지 않으므로 화살표 함수가 작동하지 않지만 일반 함수는 작동합니다.

https://codeburst.io/javascript-arrow-functions-for-beginners-926947fc0cdc

http://wesbos.com/arrow-function-no-no/

Answer 2

한 가지 방법 "해결"이 e.currentTarget를 사용하는 대신 Wesbos

Use currentTarget instead of target as target can change if you have nested elements like a span inside a link