JavaScript

53 JavaScript 箭头函数

ES6 中引入了箭头函数。

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

53.1 语法

以前定义函数

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

用了箭头函数后：

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

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

箭头函数默认返回值：

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

**注释：**这仅在函数只有一条语句时才有效。

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

带参数的箭头函数：

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

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

不带括号的箭头函数：

hello = val => "Hello " + val;

53.2 this 怎么办？

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

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

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

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

【栗子】

53.2.1 常规函数

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

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

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

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

53.2.2 箭头函数

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

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

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

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

相同的例子，hello函数改为了箭头函数

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

53.3 浏览器支持

首个完全支持 JavaScript 箭头函数的浏览器版本：