关于前端:怎样把箭头函数作为事件侦听器的回调

箭头函数

ES6 引入了箭头函数的概念，这是一种新的定义和编写函数的办法。尽管它看起来像是惯例函数的句法糖，但它们之间的要害差别是对 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 事件替换的回调，这个回调用来在单击元素的 active 和 inactive 两个状态之间转换。当应用惯例函数时，回调中的 this 将会绑定到触发事件的元素上。

把箭头函数用作回调

箭头函数没有他本人的绑定到 this。那么如果把后面的代码段转换为箭头函数，会怎么样？它的 this 指向的是全局的 window 对象。

const toggleElements = document.querySelectorAll('.toggle');
toggleElements.forEach(el => {el.addEventListener('click', () => {this.classList.toggle('active'); //“this”指向“window”// Error: Cannot read property 'toggle' of undefined
  });
});

因为 window 对象不具备 classlist 属性，所以只有单击匹配的元素，代码都会抛出谬误，从而触发事件侦听器并执行回调。然而个别状况下，代码可能会悄无声息地失败，例如它可能查看某个条件，该条件判断对于 window 总是返回为 false，而对于给定的元素它应该返回 true，这会引发许多麻烦并节约你的工夫。

要解决这个问题，能够简略地通过回调函数的第一个参数和 event.target 或 event.currenttarget，到底用哪个取决于你的需要：

const toggleElements = document.querySelectorAll('.toggle');
toggleElements.forEach(el => {el.addEventListener('click', (e) => {e.currentTarget.classList.toggle('active'); // 工作失常
  });
});

本文首发微信公众号：前端先锋

欢送扫描二维码关注公众号，每天都给你推送陈腐的前端技术文章

欢送持续浏览本专栏其它高赞文章：

• 深刻了解 Shadow DOM v1
• 一步步教你用 WebVR 实现虚拟现实游戏
• 13 个帮你进步开发效率的古代 CSS 框架
• 疾速上手 BootstrapVue
• JavaScript 引擎是如何工作的？从调用栈到 Promise 你须要晓得的所有
• WebSocket 实战：在 Node 和 React 之间进行实时通信
• 对于 Git 的 20 个面试题
• 深刻解析 Node.js 的 console.log
• Node.js 到底是什么？
• 30 分钟用 Node.js 构建一个 API 服务器
• Javascript 的对象拷贝
• 程序员 30 岁前月薪达不到 30K，该何去何从
• 14 个最好的 JavaScript 数据可视化库
• 8 个给前端的顶级 VS Code 扩大插件
• Node.js 多线程齐全指南
• 把 HTML 转成 PDF 的 4 个计划及实现

• 更多文章 …