JavaScript 箭头函数

:箭头函数是在 ES6 中引入的。箭头函数允许我们编写更短的函数语法：

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

尝试一下 »

:在 Arrow 之前

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关键字始终表示 对象 定义了箭头函数。

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

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

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

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

:使用常规函数`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