箭头函数

this 怎么办？

与常规函数相比，箭头函数对 this 的处理也有所不同。

简而言之，使用箭头函数没有对 this 的绑定。

在常规函数中，关键字 this 表示调用该函数的对象，可以是窗口、文档、按钮或其他任何东西。

对于箭头函数，this 关键字始终表示定义箭头函数的对象。

让我们看两个例子来理解其中的差异。

这两个例子都调用了两次方法，第一次是在页面加载时，第二次是在用户单击按钮时。

第一个例子使用常规函数，第二个例子使用箭头函数。

结果显示第一个例子返回两个不同的对象（window 和 button），第二个例子返回两次 window 对象，因为 window 对象是函数的“所有者”。

实例

对于常规函数，this 表示调用该函数的对象：

// 常规函数：
hello = function() {
  document.getElementById("demo").innerHTML += this;
}

// window 对象调用该函数：
window.addEventListener("load", hello);

// button 对象调用该函数：
document.getElementById("btn").addEventListener("click", hello);

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

用了箭头函数，则 this 表示函数的拥有者：

// 箭头函数：
hello = () => {
  document.getElementById("demo").innerHTML += this;
}

// window 对象调用该函数：
window.addEventListener("load", hello);

// button 对象调用该函数：
document.getElementById("btn").addEventListener("click", hello);

运行实例 »

点击 "运行实例" 按钮查看在线实例

使用函数时请记住这些差异。有时，常规函数的行为正是您想要的，如果不是，请使用箭头函数。

浏览器支持

下表注明了首个完全支持 JavaScript 箭头函数的浏览器版本：

Chrome	IE	Firefox	Safari	Opera
Chrome 45	Edge 12	Firefox 22	Safari 10	Opera 32
2015 年 9 月	2015 年 7 月	2013 年 5 月	2016 年 9 月	2015 年 9 月