碎片时间学编程「05」：可以使用箭头函数作为 JavaScript 中事件侦听器的回调吗？

箭头函数

JavaScript ES6 引入了箭头函数的概念，这是一种定义和编写函数的新方法。虽然它们看起来像是常规函数之上的语法，但它们有一个关键区别，即 this 上下文绑定的方式。我强烈建议您阅读了解 JavaScript 中的“this”关键字，因为我不会在本文中详细介绍该主题。总结一下：

箭头函数没有自己的绑定 this，导致 this 保留封闭词法上下文的值 this。

事件监听器回调

编写浏览器端 JavaScript 时的一项常见任务是创建事件侦听器。例如：

const toggleElements = document.querySelectorAll('.toggle');

toggleElements.forEach(el => {

  el.addEventListener('click', function() {

    this.classList.toggle('active');

  });

});

在上面的示例中，我们使用NodeList.prototype.forEach()迭代匹配节点并EventTarget.addEventListener()使用常规函数作为'click'事件的回调，以在单击元素的活动和非活动状态之间切换。我们使用的是常规函数，因此this回调中的上下文将绑定到事件目标。

箭头函数作为回调

正如我们已经解释过的，箭头函数没有自己的绑定 this。那么如果我们将前面代码片段的回调转换为箭头函数会发生什么呢？它的 this 上下文是指全局上下文，在这种情况下是Window对象。

const toggleElements = document.querySelectorAll('.toggle');

toggleElements.forEach(el => {

  el.addEventListener('click', () => {

    this.classList.toggle('active'); // `this` 引用到`Window`

  });

});

此代码将触发事件侦听器并在单击匹配元素时执行回调。但是，由于Window对象没有classList属性，它会抛出错误。通常，代码甚至会默默地失败。Window这个例子是一个总评估为 false 的 for循环条件，但对于给定的元素可以评估为  true 。诸如此类的问题会导致很头痛并浪费时间，直到您可以发现并解决它们。

为了解决这个问题，根据需要，可以简单地使用回调函数的第一个参数，Event.target 或者Event.currentTarget：

const toggleElements = document.querySelectorAll('.toggle');

toggleElements.forEach(el => {

  el.addEventListener('click', (e) => {

    e.currentTarget.classList.toggle('active'); // works correctly

  });

});

恭喜您读到这里，如果想了解更多技术，可以访问我的网站：路条编程。