JavaScript 箭头函数详解：语法简化与 this 绑定机制

为提升阅读体验，本文采用意译方式呈现。内容版权归原作者所有，翻译目的仅限学习交流。

本文将重点阐述箭头函数带来的主要优势。

箭头函数的简洁语法

语法更加简洁

首先回顾常规函数的定义方式：

function funcName(params) {
  return params + 2;
 }
funcName(2);
// 4

若使用箭头函数，仅需一行代码即可完成相同功能。

var funcName = (params) => params + 2
funcName(2);
// 4

这种写法非常简洁，尽管示例较为极端，但清晰展示了箭头函数在代码编写上的优势。接下来深入解析其具体语法： (parameters) => { statements }

当函数没有参数时，可以进一步简化写法： () => { statements }

若函数仅有一个参数，可以省略包裹参数的括号： parameters => { statements }

当返回值仅为单一表达式时，还可以省略大括号： parameters => expression

// 等价于:
function (parameters){
 return expression;
}

掌握语法后，我们进行实战演练。请在 Chrome 浏览器开发者控制台中输入以下代码： var double = num => num * 2

我们将变量 double 绑定至一个箭头函数，该函数接收参数 num，并返回 num 乘以 2 的结果。调用该函数的示例如下：

double(2);
// 4

double(3);
// 6

箭头函数与 this 绑定机制

不绑定局部 this 上下文

与普通函数不同，箭头函数不会自行绑定 this 关键字，而是沿用外层作用域中 this 的原有绑定关系。

通过以下示例进行说明：

function Counter() {
 this.num = 0;
}
var a = new Counter();

由于使用了 new 关键字构造，Count() 函数内的 this 被绑定至新创建的对象，并赋值给变量 a。通过 console.log 打印该对象属性。

a.num ，会输出0。 
console.log(a.num);
// 0

若希望每秒将 a.num 的值增加 1，应如何实现？可以使用 setInterval() 函数。

function Counter() {
 this.num = 0;
 this.timer = setInterval(function add() {
  this.num++;
  console.log(this.num);
 }, 1000);
}

观察运行输出结果：

var b = new Counter();
// NaN
// NaN
// NaN
// ...

你会发现，每隔一秒打印出的值是 NaN，而非预期的递增数字。问题出在哪里？

首先执行以下语句以停止 setInterval 的持续执行： clearInterval(b.timer);

我们来分析错误原因：依据相关规则，setInterval 并非由特定声明对象调用，也未使用 new 关键字，且未通过 bind、call 或 apply 改变上下文。因此，setInterval 内部使用的 this 默认绑定至全局对象。我们可以通过打印 this 来验证：

function Counter() {
 this.num = 0;
this.timer = setInterval(function add() {
  console.log(this);
 }, 1000);
}
var b = new Counter();

控制台打印出了整个 window 对象。使用以下命令停止打印： clearInterval(b.timer);

回到之前的函数，打印 NaN 的原因在于 this.num 被绑定到了 window 对象的 num 属性，而 window.num 并未定义。

如何解决此问题？使用箭头函数！箭头函数能避免 this 被意外绑定到全局对象。

function Counter() {
 this.num = 0;
 this.timer = setInterval(() => {
  this.num++;
  console.log(this.num);
 }, 1000);
}
var b = new Counter();
// 1
// 2
// 3
// ...

通过 Counter 构造函数绑定的 this 将被保留。在 setInterval 函数中，this 依然指向我们新创建的 b 对象。

为验证上述观点，可将 Counter 函数中的 this 赋值给变量 that，并在 setInterval 中判断 this 与 that 是否相等。

function Counter() {
 var that = this;
 this.timer = setInterval(() => {
  console.log(this === that);
 }, 1000);
}
var b = new Counter();
// true
// true
// ...

正如预期，每次打印的值均为 true。最后，停止持续打印： clearInterval(b.timer);

总结

1. 箭头函数提供了更简洁的代码语法；

2. 不会自动绑定 this 关键字。

原文: JavaScript: Arrow Functions for Beginners

译者: Fundebug

译者按: 箭头函数看似仅是语法层面的变动，实则深刻影响了 this 的作用域机制。