Les «fonctions fléchées» et les «fonctions» sont-elles équivalentes / interchangeables?

Dec 19 2015

Les fonctions de flèche dans ES2015 fournissent une syntaxe plus concise.

Puis-je remplacer toutes mes déclarations / expressions de fonction par des fonctions fléchées maintenant?
À quoi dois-je faire attention?

Exemples:

Fonction constructeur

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

// vs

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

Méthodes de prototype

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

// vs

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

Méthodes objet (littérales)

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

// vs

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

Rappels

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

// vs

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

Fonctions variadiques

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

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

Réponses

817 FelixKling Dec 19 2015 at 00:58

tl; dr: Non! Les fonctions fléchées et les déclarations / expressions de fonction ne sont pas équivalentes et ne peuvent pas être remplacées aveuglément.
Si la fonction que vous souhaitez remplacer ne pas utiliser this, argumentset n'est pas appelé avec new, alors oui.

Comme souvent: cela dépend . Les fonctions fléchées ont un comportement différent des déclarations / expressions de fonction, alors examinons d'abord les différences:

1. Lexique thisetarguments

Les fonctions fléchées n'ont pas les leurs thisni argumentsles leurs. Au lieu de cela, ces identificateurs sont résolus dans la portée lexicale comme toute autre variable. Cela signifie qu'à l'intérieur d'une fonction de flèche, thiset se argumentsréférer aux valeurs de thiset argumentsdans l'environnement, la fonction de flèche est définie dans (c'est-à-dire "à l'extérieur" de la fonction de flèche):

// 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

// 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 le cas de l'expression de fonction, thisfait référence à l'objet qui a été créé dans le createObject. Dans le cas de la fonction flèche, se thisréfère à lui this- createObjectmême.

Cela rend les fonctions fléchées utiles si vous devez accéder à l' thisenvironnement actuel:

// currently common pattern
var that = this;
getData(function(data) {
  that.data = data;
});

// better alternative with arrow functions
getData(data => {
  this.data = data;
});

Notez que cela signifie également qu'il n'est pas possible de définir une fonction de flèche thisavec .bindou .call.

Si vous n'êtes pas très familier avec this, pensez à lire

2. Les fonctions fléchées ne peuvent pas être appelées avec new

ES2015 établit une distinction entre les fonctions qui appellent mesure et les fonctions qui sont construire en mesure. Si une fonction est constructible, elle peut être appelée avec new, ie new User(). Si une fonction est appelable, elle peut être appelée sans new(c'est-à-dire appel de fonction normal).

Les fonctions créées par des déclarations / expressions de fonction sont à la fois constructibles et appelables.
Les fonctions (et méthodes) fléchées sont uniquement appelables. classles constructeurs sont uniquement constructibles.

Si vous essayez d'appeler une fonction non appelable ou de construire une fonction non constructible, vous obtiendrez une erreur d'exécution.

Sachant cela, nous pouvons affirmer ce qui suit.

Remplaçable:

Fonctions qui n'utilisent pas thisou arguments.
Fonctions utilisées avec .bind(this)

Non remplaçable:

Fonctions du constructeur
Fonction / méthodes ajoutées à un prototype (car elles l'utilisent généralement this)
Fonctions variadiques (si elles utilisent arguments(voir ci-dessous))

Regardons cela de plus près en utilisant vos exemples:

Fonction constructeur

Cela ne fonctionnera pas car les fonctions fléchées ne peuvent pas être appelées avec new. Continuez à utiliser une déclaration / expression de fonction ou utilisez class.

Méthodes de prototype

Très probablement pas, car les méthodes prototypes utilisent généralement thispour accéder à l'instance. S'ils ne l'utilisent pas this, vous pouvez le remplacer. Cependant, si vous vous souciez principalement de la syntaxe concise, utilisez classavec sa syntaxe de méthode concise:

class User {
  constructor(name) {
    this.name = name;
  }
  
  getName() {
    return this.name;
  }
}

Méthodes objet

De même pour les méthodes dans un objet littéral. Si la méthode souhaite référencer l'objet lui-même via this, continuez à utiliser des expressions de fonction ou utilisez la nouvelle syntaxe de méthode:

const obj = {
  getName() {
    // ...
  },
};

Rappels

Ça dépend. Vous devez absolument le remplacer si vous aliasez l'extérieur thisou utilisez .bind(this):

// old
setTimeout(function() {
  // ...
}.bind(this), 500);

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

Mais: Si le code qui appelle le callback définit explicitement thisune valeur spécifique, comme c'est souvent le cas avec les gestionnaires d'événements, en particulier avec jQuery, et que le callback utilise this(ou arguments), vous ne pouvez pas utiliser une fonction de flèche!

Fonctions variadiques

Étant donné que les fonctions fléchées n'ont pas les leurs arguments, vous ne pouvez pas simplement les remplacer par une fonction fléchée. Cependant, ES2015 introduit une alternative à l'utilisation arguments: le paramètre rest .

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

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

Question connexe:

Autres ressources:

17 Ashutosh Jan 10 2020 at 03:22

Fonctions fléchées => meilleure fonctionnalité ES6 à ce jour. Ils sont un ajout extrêmement puissant à ES6, que j'utilise constamment.

Attendez, vous ne pouvez pas utiliser la fonction fléchée partout dans votre code, elle ne fonctionnera pas dans tous les cas, comme thislorsque les fonctions fléchées ne sont pas utilisables. Sans aucun doute, la fonction flèche est un excellent ajout, elle apporte la simplicité du code.

Mais vous ne pouvez pas utiliser une fonction de flèche lorsqu'un contexte dynamique est requis: définir des méthodes, créer des objets avec des constructeurs, obtenir la cible à partir de cela lors de la gestion des événements.

Les «fonctions fléchées» et les «fonctions» sont-elles équivalentes / interchangeables?

Réponses

Les fonctions fléchées ne doivent PAS être utilisées car:

Quand utiliser la fonction fléchée et quand non: