Sont "Flèche Fonctions' et 'Fonctions' équivalent / échangeables?

Flèche fonctions dans ES2015 fournir une syntaxe plus concise.

Puis-je remplacer toutes mes déclarations de fonction /expressions avec flèche fonctions maintenant?
Que dois-je faire attention?

Exemples:

Fonction constructeur

function User(name) {
  this.name = name;
}

//vs

const User = name => {
  this.name = name;
};

Prototype des méthodes

User.prototype.getName = function() {
  return this.name;
};

//vs

User.prototype.getName = () => this.name;

Objet (littérale) de méthodes

const obj = {
  getName: function() {
    //...
  }
};

//vs

const obj = {
  getName: () => {
    //...
  }
};

Rappels

setTimeout(function() {
  //...
}, 500);

//vs

setTimeout(() => {
  //...
}, 500);

Variadic fonctions

function sum() {
  let args = [].slice.call(arguments);
  //...
}

//vs
const sum = (...args) => {
  //...
};

Des questions similaires sur la flèche fonctions sont venus de plus en plus avec ES2015 de plus en plus populaire. Je n'ai pas envie de il y avait une bonne canonique de question/réponse pour ce problème j'ai donc créé ce un. Si vous pensez qu'il y a déjà un bon un, s'il vous plaît laissez-moi savoir et je vais fermer celui-ci que les dupliquer ou de les supprimer. N'hésitez pas à améliorer les exemples ou en ajouter de nouvelles.
Ce sujet JavaScript ecma6 changement de la fonction normale de la flèche de la fonction? Bien sûr, une question normale ne peut jamais être aussi bon et générique comme un spécifiquement écrit pour être canonique.
Regardez ce Plnkr exemple La variable this est très différent timesCalled incréments seulement par 1 chaque fois que le bouton est appelé. Ce qui répond à ma question personnelle: .click( () => { } ) et .click(function() { }) à la fois de créer le même nombre de fonctions lorsqu'il est utilisé dans une boucle comme vous pouvez le voir à partir du Guid compter dans le Plnkr.
Related post - Quand dois-je utiliser la Flèche fonctions dans ECMAScript 6?

InformationsquelleAutor Felix Kling | 2015-12-18

602

tl;dr: Pas! Flèche fonctions et les déclarations de fonction /expressions ne sont pas équivalentes et ne peuvent pas être remplacés à l'aveuglette.

Si la fonction que vous voulez remplacer ne pas utilisation this, arguments et n'est pas appelé avec new, alors oui.

Comme si souvent: ça dépend. Flèche fonctions ont un comportement différent de déclarations de fonction /expressions, donc permet d'avoir un regard sur les différences premières:

1. Lexicale this et arguments

Flèche fonctions n'ont pas leur propre this ou arguments de liaison. Au lieu de cela, ces identifiants sont résolus dans la portée lexicale comme toute autre variable. Cela signifie que l'intérieur d'une flèche fonction, this et arguments référer aux valeurs de this et arguments dans l'environnement de la flèche en fonction défini dans (c'est à dire "en dehors de" la flèche de la fonction):

JS:
```
//Example using a function expression
function createObject() {
  console.log('Inside `createObject`:', this.foo);
  return {
    foo: 42,
    bar: function() {
      console.log('Inside `bar`:', this.foo);
    },
  };
}

createObject.call({foo: 21}).bar(); //override `this` inside createObject
```
JS:
```
//Example using a arrow function
function createObject() {
  console.log('Inside `createObject`:', this.foo);
  return {
    foo: 42,
    bar: () => console.log('Inside `bar`:', this.foo),
  };
}

createObject.call({foo: 21}).bar(); //override `this` inside createObject
```
Dans l'expression de fonction cas, this fait référence à l'objet qui a été créé à l'intérieur de la createObject. Dans le cas de fonction de flèche, this se réfère à this de createObject lui-même.

Ce fait flèche de fonctions utiles si vous avez besoin d'accéder à la this de l'environnement actuel:
```
//currently common pattern
var that = this;
getData(function(data) {
  that.data = data;
});

//better alternative with arrow functions
getData(data => {
  this.data = data;
});
```
Note que cela signifie aussi qui est pas possible de définir une flèche en fonction de la this avec .bind ou .call.

Si vous n'êtes pas très familier avec this, pensez à lire
- MDN - ce
- YDKJS - ce & Objet de prototypes
2. Flèche fonctions ne peuvent pas être appelée avec new

ES2015 fait la distinction entre les fonctions qui sont appelmesure et les fonctions qui sont construiremesure. Si une fonction est constructable, elle peut être appelée avec new, c'est à dire new User(). Si une fonction est remboursable, il peut être appelé sans new (c'est à dire normal appel de fonction).

Fonctions créées par les déclarations de fonction /expressions sont à la fois constructable et exigible.

Flèche fonctions (méthodes) sont uniquement remboursables.
class constructeurs ne sont constructable.

Si vous essayez d'appeler un non-rachetable de la fonction ou de la construction d'un non-constructable fonction, vous obtiendrez une erreur d'exécution.

Sachant cela, nous pouvons affirmer ce qui suit.

Remplaçable:
- Fonctions qui n'utilisent pas this ou arguments.
- Fonctions qui sont utilisées avec .bind(this)
Pas remplaçable:
- Constructeur fonctions
- Fonctions /méthodes ajoutée à un prototype (parce qu'ils utilisent habituellement this)
- Variadic fonctions (s'ils utilisent arguments (voir ci-dessous))
Vous permet de regarder de plus près ce à l'aide de votre exemples:

Fonction constructeur

Cela ne marchera pas, parce que la flèche fonctions ne peuvent pas être appelée avec new. Gardez à l'aide d'une déclaration de fonction /de l'expression ou de l'utilisation class.

Prototype des méthodes

Probablement pas, parce que prototype des méthodes généralement utiliser this pour accéder à l'instance. S'ils n'utilisent pas this, alors vous pouvez le remplacer. Toutefois, si vous utilisez principalement des soins de concise de la syntaxe, l'utilisation class avec ses concis méthode syntaxe:
```
class User {
  constructor(name) {
    this.name = name;
  }

  getName() {
    return this.name;
  }
}
```
Méthodes de l'objet de

De même pour les méthodes d'un objet littéral. Si la méthode se veut de référence de l'objet lui-même via this, gardez à l'aide des expressions de fonction, ou de l'utilisation de la nouvelle méthode de syntaxe:
```
const obj = {
  getName() {
    //...
  },
};
```
Rappels

Il dépend. Vous devez absolument la remplacer, si vous vous êtes aliasing l'extérieur this ou utilisez .bind(this):
```
//old
setTimeout(function() {
  //...
}.bind(this), 500);

//new
setTimeout(() => {
  //...
}, 500);
```
Mais: Si le code qui appelle la fonction de rappel définit explicitement this à une valeur spécifique, comme c'est souvent le cas avec les gestionnaires d'événements, en particulier avec jQuery, et le rappel utilise this (ou arguments), vous ne peut pas une flèche fonction!

Variadic fonctions

Depuis flèche fonctions n'ont pas leur propre arguments, vous ne pouvez pas tout simplement de les remplacer par une flèche fonction. Cependant, ES2015 introduit une alternative à l'utilisation de arguments: le reste paramètre.
```
//old
function sum() {
  let args = [].slice.call(arguments);
  //...
}

//new
const sum = (...args) => {
  //...
};
```
Liés à la question:
D'autres ressources:
- MDN - Flèche fonctions
- YDKJS - Flèche fonctions
- Éventuellement utile de mentionner que la lexicales this affecte également super et qu'ils n'ont pas .prototype.
- Il serait également bon de mentionner qu'ils ne sont pas syntaxiquement interchangeables -- une flèche fonction (AssignmentExpression) ne peut pas être abandonné partout, une expression de fonction (PrimaryExpression) le pouvoir et les voyages de personnes assez souvent (surtout depuis il y a eu des erreurs d'analyse dans les grandes JS implémentations).
- les voyages de personnes assez fréquemment" pouvez-vous donner un exemple concret? Survolant les spec, il semble que les endroits où vous pouvez mettre un FE, mais pas un AF entraînerait des erreurs d'exécution, de toute façon...
- Bien sûr, je veux dire des trucs comme essayer d'invoquer directement une flèche fonctionner comme une expression de fonction (() => {}()) ou de faire quelque chose comme x || () => {}. C'est ce que je veux dire: le temps d'exécution (parse) des erreurs. (Et même si c'est le cas, assez fréquemment les gens pense que l'erreur est dans l'erreur.) Etes-vous en essayant de couvrir les erreurs de logique qui serait passé inaperçu parce qu'ils ne sont pas forcément d'erreur lors de l'analyse ou exécutés? new'ing est une erreur d'exécution droit?
- Voici quelques liens de venir jusqu'à l'état sauvage: substack/node-browserify#1499, babel/babel-eslint#245 (c'est un async flèche, mais je pense que c'est le même problème), et un tas de questions, sur Babel qui sont difficiles à trouver maintenant, mais voici un T2847.
- Je vois ce que tu veux dire. Ouais, j'étais plus concentré sur le comportement, moins sur la syntaxe. Mais je peux développer là-dessus dans la réponse. Ou n'hésitez pas à le modifier vous-même 🙂 "la nouvelle qui pratiquent l'une est une erreur d'exécution droit?" Oui.
- Ok cool. Je pense qu'il serait utile d'expliquer parce que je pense que les gens trouve déjà surprenant et trouverait plus après la lecture d'une ventilation de la façon dont ils ne sont pas interchangeables qui ne l'ai pas mentionné. Mais il est vrai que, dans une non-écoute de la mise en œuvre de ne pas voler sous le radar (même si, comme je l'ai mentionné, les gens ont tendance à trouver cela surprenant / sont donc utilisés pour un buggé mise en œuvre qu'ils pense que l'erreur est du à un bug.)
- Je ne suis pas un fan de cette réponse parce que le stockage de that en dehors de la fonction et de l'écrire avec this n'est pas toujours garanti dans le cas d'objets imbriqués/fonctions. Cela dépend d'où that est fixé à this. Je vois ce que vous voulez le montrer, mais il y a une chance énorme de la lecture il. Anon fournir certaines fonctionnalités qui ne peuvent pas être recréés avec l'aiguille courte et ce point devrait être celui que vous êtes au volant de la maison.
- Je ne veux pas promouvoir la var that = this; modèle. C'est juste inclus parce que c'est un modèle commun et exactement le même que celui que la flèche fonctions sont censés remplacer.
- Grande compréhension de concepts importants. Mais je viens de remarquer que vous avez manqué la différence entre les expressions de fonction et les déclarations de fonction. Les déclarations de fonction déclarations commence toujours par le mot-clé function, tandis que les expressions de fonction à commencer par autre chose que le mot-clé function. C'est ce qui rend IIFEs, une fonction assignée à une variable parmi d'autres expressions de fonction contrairement aux déclarations de fonction. Vraiment du bon boulot mais en expliquant toutes ces. Bravo.
- merci!!!! Il y a d'autres q&a, avec plus de détails sur la déclaration de la fonction vs expression. Cette q&a suppose que la différence est connue. Même si je comprends ce que vous dites, ce n'est pas tout à fait exact: les expressions de fonction aussi de toujours commencer avec le function mot-clé, mais ce qui vient avant la function mot-clé détermine si la définition de la fonction est interprété comme une déclaration ou d'une expression. Cette partie ne fait pas partie de l'expression de fonction si. E. g. si vous avez foo = function (){}, puis le = fait partie de la mission de l'expression, et non pas l'expression de fonction.
- Jetez un oeil à astexplorer.net si vous êtes intéressé par la façon dont les programmes JavaScript sont construites du point de vue syntaxique (ou au moins ce que l'AST ressemble à ça JS populaires des analyseurs de produire).
- Déclaration de la fonction Image sur astexplorer.net : fic.co/dKjY9b vs Expression de Fonction Image sur astexplorer.net : fic.co/itp0pb
- La droite. Et si vous passez la souris sur la fonction de l'expression dans l'arborescence de la vue, vous pouvez voir que le (...)() partie ne fait pas partie de la fonction d'expression. C'est tout ce que je dis.
- Au niveau du fichier, il n'y a pas de différence entre function foo(...) { return ... } et const foo = (...) => { return ... }, pourtant je vois le dernier motif est utilisé très fréquemment, surtout dans Réagissent les bibliothèques. Pourquoi créer une fonction anonyme et l'assigner à une constante, lorsqu'une fonction régulière déclaration ferait la même chose?
- les gens aiment utiliser les nouvelles choses peut-être? En théorie, vous pouvez remplacer foo dans le premier cas, plus tard, tandis que const l'en empêche. Pas sûr que ce soit la raison de bien.
- Dans votre premier exemple, vous ne pas écraser quelque chose... tu viens de revenir d'un autre objet, puis vous passez à la ce-paramètre d'appel()
InformationsquelleAutor Felix Kling

Vous devez vous connecter pour publier un commentaire.