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

如果你只是将箭头函数转换为 function 函数，它看起来像这样：

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

...但请注意，这里发生的事情比 ES2015 ("ES6") 多。 : Article[] 部分是说 sortedArticles return 是 Article 的数组。（类似地，a 和 b 上的 : Article 限定词。）那根本不是 JavaScript。看起来像 TypeScript.

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

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

但是 TypeScript 的 "fat arrow" 函数的工作方式与 ES2015 的箭头函数基本相同，所以让我们在讨论 ES2015 箭头函数的基础上继续：

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

他们关闭了 this、super 和其他一些东西，² 他们没有自己的版本像 function 函数那样。（这样做的结果是，如果它们是在可以使用 super 的上下文中定义的，则它们可以使用 super，而 function 函数不能。）
他们可以有一个简洁的正文而不是冗长的正文（但他们也可以有一个冗长的正文）。
它们不能用作构造函数。例如，您不能将 new 与箭头函数一起使用。这样做的结果是箭头函数上没有 prototype 属性（因为它仅在函数与 new 一起使用时使用）。
箭头函数没有 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，他们将与不同。）

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

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

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

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

Answer 2

如果你对箭头函数不熟悉，或者比较复杂，可以使用JS Refactor，它是一个Visual Studio代码扩展。它可以将箭头函数转换为普通函数。希望对大家有帮助。

Es6 箭头函数转普通js

Es6 Arrow function to normal js

javascript

sorting

ecmascript-6

arrow-functions