JavaScript 箭头函数

ES6 中引入了箭头函数。

箭头函数允许我们编写更短的函数语法：

let myFunction = (a, b) => a * b;

亲自试一试 »

箭头之前：

hello = function() {
return "Hello World!";
}

亲自试一试 »

带箭头功能：

hello = () => {
return "Hello World!";
}

亲自试一试 »

越来越短了！如果函数只有一条语句，并且该语句返回一个值，则可以去掉括号和这个return关键字：

箭头函数默认返回值：

hello = () => "Hello World!";

亲自试一试 »

笔记：仅当函数只有一条语句时，此方法才有效。

如果有参数，则将它们传递到括号内：

带参数的箭头函数：

hello = (val) => "Hello " + val;

亲自试一试 »

事实上，如果只有一个参数，也可以跳过括号：

不带括号的箭头函数：

hello = val => "Hello " + val;

亲自试一试 »

关于什么`this`？

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

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

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

使用箭头函数this关键字总是表示定义箭头函数的对象。

让我们看两个例子来理解其中的区别。

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

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

结果显示，第一个示例返回两个不同的对象（窗口和按钮），第二个示例返回两次窗口对象，因为窗口对象是函数的"owner"。

示例

具有常规功能this代表的对象是来电功能：

// Regular Function:
hello = function() {
document.getElementById("demo").innerHTML += this;
}

// The window object calls the function:
window.addEventListener("load", hello);

// A button object calls the function:
document.getElementById("btn").addEventListener("click", hello);

亲自试一试 »

示例

带箭头功能this代表所有者函数的：

// Arrow Function:
hello = () => {
document.getElementById("demo").innerHTML += this;
}

// The window object calls the function:
window.addEventListener("load", hello);

// A button object calls the function:
document.getElementById("btn").addEventListener("click", hello);

亲自试一试 »

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

浏览器支持

下表定义了完全支持 JavaScript 中箭头函数的第一个浏览器版本：


Chrome 45	Edge 12	Firefox 22	Safari 10	Opera 32
Sep, 2015	Jul, 2015	May, 2013	Sep, 2016	Sep, 2015

JavaScript 箭头函数

箭头之前：

带箭头功能：

箭头函数默认返回值：

带参数的箭头函数：

不带括号的箭头函数：

关于什么this？

示例

示例

浏览器支持

关于什么`this`？