Es6箭头函数到普通js

Question

我一直在尝试理解 es6 的箭头函数。我读了一些介绍它的文章。但我仍然没有完全理解。

例如我有这个代码：

sortedArticles(): Article[] {
    return this.articles.sort((a: Article, b: Article) => b.votes -  a.votes);
}

它对下面的数组进行排序：

[
  new Article('Angular 2', 'http://angular.io', 3),
  new Article('Fullstack', 'http://fullstack.io', 2),
  new Article('Angular Homepage', 'http://angular.io', 1),
]; 

相同的代码在普通的旧 js 中看起来如何？我无法完全理解它。

Answer 1

如果你对箭头函数不熟悉，或者如果它很复杂，你可以使用JS Refactor，它是一个 Visual Studio Code 扩展。它可以将箭头函数转换为普通函数。希望它可以帮助某人。

Answer 2

如果您只是将箭头函数转换为function 函数，它会如下所示：

sortedArticles(): Article[] {
    return this.articles.sort(function(a: Article, b: Article) { return b.votes -  a.votes;});
// ---------------------------^^^^^^^^------------------------^^^-------------------------^^
}

...但请注意，除了 ES2015（“ES6”）之外，还有更多内容。 : Article[] 部分表示sortedArticles 返回一个Article 的数组。 （类似地，a 和 b 上的 : Article 限定符。）这根本不是 JavaScript。看起来像TypeScript。

纯 JavaScript 版本只会删除那些类型注释：

sortedArticles() {
    return this.articles.sort(function(a, b) { return b.votes -  a.votes;});
}

但是 TypeScript 的“胖箭头”函数的工作方式与 ES2015 的箭头函数大致相同，所以让我们继续讨论 ES2015 的箭头函数：

箭头函数和function函数有四个根本区别¹：

1. 它们关闭了 this、super 和其他一些东西，²它们没有像 function 函数那样的自己的版本。 （这样做的结果是，如果在可以使用 super 的上下文中定义它们，它们可以使用 super，而 function 函数不能。）

2. 它们可以有一个简洁的正文而不是一个冗长的正文（但它们也可以有一个冗长的正文）。

3. 它们不能用作构造函数。例如，您不能将 new 与箭头函数一起使用。这样做的结果是箭头函数没有prototype 属性（因为它仅在函数与new 一起使用时使用）。

4. 箭头函数没有 generator 语法。例如，没有与 function *foo() { ... } 等效的箭头。

这三个函数实际上都是相同的，因为它们不使用this 或arguments：

// A `function` function
var f1 = function(x) {
    return x * 2;
};

// An arrow function with a verbose body
var f2 = x => {
    return x * 2;
};

// An arrow function with a concise body
var f3 = x => x * 2;

（如果他们使用this 或arguments，他们将不相同。）

请注意，简洁的正文在=> 之后没有{，并且必须包含一个顶级表达式（当然可以有子表达式），用作返回值。

---

¹ 你会发现有人告诉你有第五个：箭头函数不能有名字。 That's a myth. 箭头函数可以有名字；上面的箭头函数有真名，分别是f2 和f3。不仅仅是变量有名字，函数也有名字。

² 具体来说，they close overthis、super、arguments（运行时参数的自动伪数组）和new.target。

---

非常感谢 CodingIntrigue 指出此答案早期版本中的几个错误和遗漏。