JavaScript：初学者的箭头功能

上周，我以针对初学者的关键字this发表了这篇文章 。 该文章未涉及的主题之一是箭头功能。 该主题太大而无法在该博文中讨论，因此本文旨在弥补这一不足。 继续阅读以了解箭头功能的基础知识！

好处1：语法短

让我们看一下常规函数：

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

上面的代码指示创建箭头功能的两个原因之一： 语法较短。 完全相同的功能可以用只有一行代码的箭头功能表示：

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

很酷 这个例子显然是一个极端的简化，但是希望可以说明我的观点。 让我们更深入地看一下箭头函数的语法：

( parameters ) => { statements }

如果没有参数，则表示一个箭头函数，如下所示：

() => { statements }

当您只有一个参数时，左括号是可选的：

parameters => { statements }

最后，如果要返回表达式，请删除方括号：

parameters => expression // is equivalent to: function (parameters){ return expression; } function (parameters){ return expression; }

好吧，您知道语法，示例如何？ 打开您的Chrome开发者控制台（Windows：Ctrl + Shift + J）（Mac：Cmd + Option + J），然后键入以下内容：

var double = num => num * 2

如您所见，我们正在将变量double分配给箭头函数。 箭头函数具有一个参数num。 由于只有一个参数，因此省略了该参数的括号。 由于我们要返回num * 2的值，因此我们也省略了要返回的表达式的方括号。 让我们调用该函数并在运行中查看它：

double(2); // 4 double(2); // 4 double(3); // 6 double(3); // 6

好处2：无约束力

在继续之前，您应该对关键字 this及其工作原理 有很好的了解 。 如果您想学习或需要复习，请先阅读 我 关于该主题的 文章 ，然后再继续。

与常规函数不同，箭头函数不会对此进行绑定。 相反，这是按词法绑定的（即，其含义与其原始上下文保持一致）。

一个例子应该使这一点更清楚。 在控制台中，让我们创建一个构造函数，然后创建一个实例：

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

正如您从我的上一篇文章中应该知道的那样，使用构造函数将其值绑定到要创建的新对象，在本例中为a对象。 这就是为什么我们可以console.log a.num并得到0

console.log(a.num); // 0

如果我们想每秒增加a.num的值怎么办？ 我们可以使用setTimeout（）函数。 setTimeout（）是在设置的毫秒数后调用另一个函数的函数。 让我们将其添加到我们的Counter函数中：

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

代码看起来与以前相同，除了我们添加了变量this.timer并将其设置为等于setInterval函数。 代码将每1000毫秒（一秒钟）运行一次。 this.num将增加1，然后将其记录到控制台。 让我们尝试一下。 在控制台中，再次创建Counter的实例：

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

如您所见，该功能将每秒登录一次屏幕。 但是结果不是我们期望的。 NaN（非数字）正在被记录。 那么，出了什么问题？ 首先是第一件事，通过运行以下命令停止令人讨厌的时间间隔：

clearInterval(b.timer);

让我们备份。 我们没有在声明的对象上调用setInterval函数。 也不会使用new关键字来调用它（仅使用Counter（）函数）。 最后，我们不使用调用，绑定或应用。 setInterval只是一个正常功能。 实际上，setIntervalis中此值绑定到全局对象！ 让我们通过记录其值来检验该理论：

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

如您所见，窗口对象每秒注销一次。 通过运行清除间隔：

clearInterval(b.timer);

回到我们原来的功能。 它正在记录NaN，因为this.num引用窗口对象（不存在的window.num）的num属性，而不是我们刚刚创建的b对象（b.num）。

那么我们该如何解决呢？ 具有箭头功能！ 我们需要一个不绑定此函数的函数。 使用箭头功能，此绑定从上下文保留其原始绑定。 让我们采用原始的Counter函数，并用箭头函数替换setInterval。

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

如您所见，控制台开始记录越来越多的数字-它起作用了！ 保留由Counter构造函数创建的原始此绑定。 在setInterval函数内部，这仍然绑定到我们新创建的b对象！

您可以使用以下方法清除间隔：

clearInterval(b.timer);

为了证明概念，我们可以再次尝试从箭头函数中记录此内容。 我们将在Counter函数中创建一个名为that的变量。 如果setInterval函数中this的值等于父Counter函数中this的值（通过that），则我们将注销true：

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

不出所料，我们每次都记录为真！ 再次使用以下方法清除间隔：

clearInterval(b.timer);

结论

希望本文能帮助您看到箭头功能的两个主要优点：

1. 较短的语法
2. 没有约束力

作为免责声明，箭头功能比本文介绍的功能更多。 但这应该为您提供丰富的知识基础，供您进一步学习！ 与往常一样，如果您有关于此主题的大量资源可供他人探索，请发表评论。

❤如果这个帖子有帮助，请打动一下！ 并且不要忘记查看我最近的其他文章：

• JavaScript：面向初学者的关键字
• JavaScript：初学者正则表达式
• 100多种免费资源来学习完整的Web开发
• 当您准备好真正深入进行Web开发时-5个学习Full Stack Web开发的最佳Udemy课程

From: https://hackernoon.com/javascript-arrow-functions-for-beginners-926947fc0cdc