箭头函数中 this 的值等同于箭头函数当前所处作用域下的 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。至于原因, 其实是回调函数引起的坑(得看浏览器触发事件时的代码)。再加上箭头函数的特殊性所以产生以上迷惑的代码片段。
当箭头函数返回的结果是对象时, 注意下写法的细节:
const result1 = () => ({ a: 1 })
const result2 = () => { return { a: 1 } }