ArrowfunctionsES6引入了箭头函数的概念，这是一种定义和编写函数的新方式。虽然它看起来像是常规函数的语法糖，但它们之间的主要区别在于this的绑定方式。我不会在本文中详细介绍这一点。事件监听器回调在为浏览器编写JavaScript时，我们通常会创建事件监听器。例如：consttoggleElements=document.querySelectorAll('.toggle');toggleElements.forEach(el=>{el.addEventListener('click',function(){this.classList.toggle('active');});});上面的例子中，使用nodelist.prototype.foreach()遍历匹配指定selector的节点和eventtarget.addeventlistener()，并使用一个正则函数作为点击事件交换的回调。该回调用于单次点击切换元素的激活状态和非激活状态。使用常规函数时，回调中的this将绑定到触发事件的元素。使用箭头函数作为回调箭头函数本身没有绑定到this。那么如果我们将前面的代码片段转换成箭头函数会发生什么呢？它的this指向全局窗口对象。consttoggleElements=document.querySelectorAll('.toggle');toggleElements.forEach(el=>{el.addEventListener('click',()=>{this.classList.toggle('active');//"this"指向“窗口”//错误：无法读取未定义的属性“切换”});});由于window对象没有classlist属性，每当单击匹配的元素时，代码就会抛出错误，触发事件侦听器并执行回调。但一般来说，代码可能会悄无声息地失败，例如，它可能会检查一个条件，当窗口应该为给定元素返回true时，它??总是返回false，这可能会导致很多麻烦并浪费你的时间。要解决这个问题，你可以简单地传递回调函数的第一个参数和event.target或event.currenttarget，你使用哪个取决于你的需要：consttoggleElements=document.querySelectorAll('.toggle');toggleElements.forEach(el=>{el.addEventListener('click',(e)=>{e.currentTarget.classList.toggle('active');//工作正常});});
