箭头函数

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个计划及实现
  • 更多文章...