Javascript es6 addeventlistener-无法读取属性'；类列表'；未定义的

我有一个addEventListener arrow函数，点击一个按钮，它通过切换一个类来改变颜色。如下所示：

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");
});

在我的控制台中：

未捕获的TypeError:无法读取未定义的属性“classList” 在HTMLButtoneElement

有趣的是将其转换为stand JS函数，如下所示：

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");
});

工作完美。我不明白为什么arrow函数版本会导致classList未定义

---

classList

如何在ES6箭头函数中工作？

在此上下文中，箭头函数不将

此

绑定到元素，而是按词汇绑定。因此，在箭头函数示例中，由于

此

未绑定到clicker元素，因此箭头函数不起作用，而常规函数起作用

一种“解决方法”是使用

e.currentTarget

而不是Ori Dori评论中建议的方法

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

引用

使用currentTarget而不是target，因为如果您有 嵌套元素，如链接内的跨距

---

使用事件目标，如下所示

 var clickButton = document.getElementById("clicker");
 clickButton.addEventListener('click', (e)=>{
     e.target.classList.toggle("modified") 
 });

---

为什么不把它写成

clickButton.classList.toggle

直接，因为你已经有了对按钮的引用？你可以，但是我现在想发布一个问答，因为我知道

这个

与箭头函数的工作方式不同。啊，我没有注意到你已经回答了你自己的问题。你的问题似乎有误导性，因为你问了

类列表在ES6 arrow函数中是如何工作的？

，答案是“与其他地方的箭头工作方式完全相同”。你回答的问题是“为什么这个类列表不起作用？”。