Es6 Arrow函数转换为普通js

问题描述

我一直试图了解es6箭头功能.我读了一些介绍它的文章.但是我仍然没有完全理解它.

I have been trying to understand es6 arrow function. I read some articles introducing it. But I'am still not getting it fully.

例如，我有以下代码:

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

它对以下数组进行排序:

It sorts the below array:

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

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

How would the same code look in plain old js? I am not able to fully get it.

推荐答案

如果只是将arrow函数转换为function函数，它将看起来像这样:

It would look like this if you just converted the arrow function to a function 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 .

...but note that there's more going on there than ES2015 ("ES6"). The : Article[] part is saying that sortedArticles returns an array of Article. (And similarly the : Article qualifiers on a and b.) That's not JavaScript at all. It looks like TypeScript.

纯JavaScript版本会删除这些类型注释:

The pure JavaScript version would just drop those type annotations:

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

但是TypeScript的胖箭头"功能的工作方式基本上与ES2015的箭头功能相同，因此，在我们谈论ES2015箭头功能的基础上，让我们继续:

But TypeScript's "fat arrow" functions work largely the same way ES2015's arrow functions do, so let's continue on the basis that we're talking about ES2015 arrow functions:

箭头功能和function功能之间有四个基本区别:

There are four fundamental differences between arrow functions and function functions:

1. 它们关闭了this，super和其他几项内容，它们没有像function函数那样的自己的版本. (这样做的结果是，如果它们是在可以使用super的上下文中定义的，则可以使用super，而function函数则不能.)

1. They close over this, super, and several other things, they don't have their own versions of those like function functions do. (A consequence of this is that they can use super if they're defined in a context that can use super, which function functions cannot.)

他们可以有一个简洁主体，而不是冗长的主体(但是他们也可以有一个冗长的主体).

They can have a concise body rather than a verbose one (but they can have a verbose body as well).

它们不能用作构造函数.例如，您不能将new与箭头功能一起使用.这样做的结果是，箭头函数上没有prototype属性(因为只有在与new一起使用时才使用).

They cannot be used as constructors. E.g., you can't use new with an arrow function. A consequence of this is that arrow functions don't have a prototype property on them (since it's only used if the function is used with new).

箭头功能没有 generator 语法.例如，没有等效于function *foo() { ... }的箭头.

There is no generator syntax for arrow functions. E.g., there is no arrow equivalent to function *foo() { ... }.

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

These three functions are all effectively the same, since they don't use this or 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，则不相同).

(If they used this or arguments, they would not be the same.)

请注意，简洁主体在=>之后没有{，并且必须包含一个顶级表达式(当然可以具有子表达式)，该顶级表达式用作返回值.

Note that the concise body doesn't have a { after the => and must contain a single top-level expression (which can of course have subexpressions), which is used as the return value.

您会发现有人告诉您第五点:箭头函数不能有名称. 这是个神话.箭头函数可以有名称；上面的箭头函数的真实名称分别为f2和f3.不仅仅是具有名称的变量，函数也具有名称.

You'll find people telling you there's a fifth: That arrow functions cannot have a name. That's a myth. Arrow functions can have names; the arrow functions above have true names, f2 and f3 respectively. It's not just the variables that have names, the functions do as well.

具体来说，它们接近了 this，super，arguments(运行时参数的自动伪数组)和new.target.

Specifically, they close over this, super, arguments (the automatic pseudo-array of runtime arguments), and new.target.

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

A huge thank you to CodingIntrigue for pointing out several errors and omissions in the earlier versions of this answer.

这篇关于Es6 Arrow函数转换为普通js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！