箭头函数

箭头函数中的 this

理解下箭头函数中 this 的本质, 看如下代码:

() => console.log(this)

经过 babel 转化后的 ES5 代码如下

var self = this
(function () {
  console.log(self)
})

结论: 箭头函数中 this 的值等同于箭头函数当前所处作用域下的 this。

箭头函数的一些不易理解场景

有如下 html 代码,

<body>
  <input />
</body>

加上如下 JavaScript 脚本测试 this 指向:

var inputTest = document.getElementsByTagName('input')
inputTest[0].addEventListener('click', function() {
  console.log(this) // 指向 input
})

inputTest[0].addEventListener('click', () => {
  console.log(this) // window
})

上述这段是为 dom 节点绑定事件的常见写法, 但是 this 指向就很奇怪了, ES5 中指向了 <input />, ES6 中却指向了 window。至于原因, 其实是回调函数引起的坑(得看浏览器触发事件时的代码)。再加上箭头函数的特殊性所以产生以上迷惑的代码片段。

箭头函数小 tip

当箭头函数返回的结果是对象时, 注意下写法的细节:

const result1 = () => ({ a: 1 })

const result2 = () => { return { a: 1 } }