es6 addeventlistener - Eigenschaft 'classList' von undefined kann nicht gelesen werden

Question

Ich habe eine addEventListener-Pfeilfunktion, bei der auf Knopfdruck die Farbe durch Umschalten einer Klasse geändert wird. das sieht aus wie folgt:

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

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

In meiner Konsole:

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

es interessant ist, dass dies zu einer Stand JS Umwandlungsfunktion wie unten:

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

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

funktioniert perfekt. Ich verstehe nicht, warum die Pfeilfunktion version classList undefiniert macht.

Wie funktioniert classList in ES6 Pfeilfunktionen?

Answer 1

Pfeilfunktionen in diesem Kontext binden this nicht an das Element, es ist lexikalisch gebunden. Als Ergebnis in der Pfeilfunktion Beispiel seit this ist nicht an das Clicker-Element gebunden, deshalb funktioniert die Pfeilfunktion nicht, sondern die reguläre Funktion.

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

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

Answer 2

Ein Weg, um "Abhilfe" wird dies e.currentTarget statt vorgeschlagen, wie durch Ori Dori Kommentar

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

Verwendung Wie zitiert von Wesbos

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