es6 addeventlistener - 无法读取未定义的属性'classList'

Question

我有一个addEventListener箭头函数,点击一个按钮,它通过切换类来改变颜色.如下所示:

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

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

在我的控制台中:

未捕获的TypeError:无法在HTMLButtonElement中读取未定义的属性"classList".

它变得有趣的地方是将它转换为一个JS函数,如下所示:

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

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

完美的工作.我不明白为什么arrow函数版本渲染classList undefined.

classListES6箭头的工作原理如何？

Answer 1

此上下文中的箭头函数不绑定this到元素,它是词法绑定的.因此在箭头函数示例中,因为this没有绑定到clicker元素,这就是箭头函数不起作用的原因,但是常规函数的作用.