箭头函数的特点：

• this 指向定义时所在的对象，而不是调用时所在的对象
• 不可以作为构造函数
• 不可以使用 arguments 对象

我们首先莱肯一个箭头函数的例子：

// 普通函数
let sum = function(x,y) {
  return x + y
}

// 箭头函数
let sum2 = (x, y) => {
  return x + y
}

// 当函数体只有一行代码且需要 return 时，函数体可以简写
// 如果只有一个参数，小括号也可以省略
let add = x => x + 10

不可以作为构造函数和不可以使用 arguments 对象都非常好理解，我们现在来讲一下什么是 this 指向定义时所在的对象，而不是调用时所在的对象。假设我们希望一秒后输出btn：

let btn = document.querySelector('button')
btn.addEventListener('click', function () {
  setTimeout(function () {
    console.log(this)
  }, 1000)
}) // 这样不行

这样并不能输出btn，因为我们知道，定时器里的 this 指向 window。改变 this 指向的有call()、apply()、bind()，我们在这里使用 bind() 方法，因为 call() 和 apply() 会让函数立即执行，bind() 方法才会让函数一秒后执行。

let btn = document.querySelector('button')
btn.addEventListener('click', function () {
  setTimeout(function () {
    console.log(this)
  }.bind(this), 1000)
})

我们在看看如何使用箭头函数来解决这个问题。

let btn = document.querySelector('button')
btn.addEventListener('click', function () {
  setTimeout(() => {
    console.log(this)
  }, 1000)
})

这样就可以了，因为箭头函数里的 this 指向定义时所在的对象，而不是调用时所在的对象。我们也可以用一个更简单的方式记忆与理解：箭头函数中没有 this 对象，因此当箭头函数里出现 this 时，它会读取上一级作用域中的 this。上述 this 出现在箭头函数里时，它会读取 addEventListener() 参数中的函数的 this 对象，也就是 btn。