箭头函数中的 this

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

  1. () => console.log(this)

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

  1. var self = this
  2. (function () {
  3.     console.log(self)
  4. })

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

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

有如下 html 代码,

  1. <body>
  2.     <input />
  3. </body>

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

  1. var inputTest = document.getElementsByTagName('input')
  2. inputTest[0].addEventListener('click', function() {
  3.     console.log(this) // 指向 input
  4. })
  5. inputTest[0].addEventListener('click', () => {
  6.     console.log(this) // window
  7. })

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

箭头函数小 tip

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

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