Les fonctions fléchées revisitées

Revenons sur les fonctions fléchées.

Les fonctions fléchées ne sont pas seulement un « raccourci » pour écrire de petites choses. Ils ont des fonctionnalités très spécifiques et utiles.

JavaScript regorge de situations dans lesquelles nous devons écrire une petite fonction exécutée ailleurs.

Par exemple:

• arr.forEach(func) – func est exécuté par forEach pour chaque élément du tableau.

• setTimeout(func) – func est exécutée par le planificateur intégré.

• …il y en a plus.

C'est dans l'esprit même de JavaScript de créer une fonction et de la transmettre quelque part.

Et dans de telles fonctions, nous ne voulons généralement pas quitter le contexte actuel. C'est là que les fonctions fléchées sont utiles.

Les fonctions fléchées n'ont pas de « ceci »

Comme on se souvient du chapitre Méthodes objets, "this", les fonctions fléchées n'ont pas this . Si this y accède, c'est de l'extérieur.

Par exemple, nous pouvons l'utiliser pour parcourir une méthode objet :

 laissez le groupe = {
  titre : "Notre Groupe",
  étudiants : ["John", "Pete", "Alice"],

  showList() {
    this.students.forEach(
      étudiant => alerte (this.title + ': ' + étudiant)
    );
  }
} ;

group.showList();

Ici, dans forEach , la fonction flèche est utilisée, donc this.title est exactement le même que dans la méthode externe showList . C'est-à-dire : group.title .

Si nous utilisions une fonction « normale », il y aurait une erreur :

 laissez le groupe = {
  titre : "Notre Groupe",
  étudiants : ["John", "Pete", "Alice"],

  showList() {
    this.students.forEach (fonction (étudiant) {
      // Erreur : Impossible de lire la propriété 'titre' non définie
      alert(this.title + ': ' + étudiant);
    });
  }
} ;

group.showList();

L'erreur se produit car forEach exécute des fonctions avec this=undefined par défaut, donc la tentative d'accès à undefined.title est effectuée.

Cela n'affecte pas les fonctions fléchées, car elles n'en ont tout simplement this .

Les fonctions fléchées ne peuvent pas fonctionner avec new

Ne pas avoir this signifie naturellement une autre limitation : les fonctions fléchées ne peuvent pas être utilisées comme constructeurs. Ils ne peuvent pas être appelés avec new .

Fonctions fléchées VS liaison

Il existe une différence subtile entre une fonction fléchée => et une fonction régulière appelée avec .bind(this) :

• .bind(this) crée une « version liée » de la fonction.

• La flèche => ne crée aucune liaison. La fonction n'a tout simplement pas this . La this s'effectue exactement de la même manière qu'une recherche de variable classique : dans l'environnement lexical externe.

Les flèches n'ont pas d'"arguments"

Les fonctions fléchées n’ont pas non plus de variable arguments .

C'est idéal pour les décorateurs, lorsque nous devons transmettre un appel avec le this et arguments actuels.

Par exemple, defer(f, ms) obtient une fonction et renvoie un wrapper autour d'elle qui retarde l'appel de ms millisecondes :

 fonction différer (f, ms) {
  fonction de retour() {
    setTimeout(() => f.apply(this, arguments), ms);
  } ;
}

fonction sayHi (qui) {
  alert('Bonjour,' + qui);
}

laissez sayHiDeferred = différer (sayHi, 2000);
sayHiDeferred("Jean"); // Bonjour, John après 2 secondes

La même chose sans fonction flèche ressemblerait à :

 fonction différer (f, ms) {
  fonction de retour(...arguments) {
    soit ctx = ceci ;
    setTimeout(fonction() {
      return f.apply(ctx, args);
    }, MS);
  } ;
}

Ici, nous avons dû créer des variables supplémentaires args et ctx pour que la fonction à l'intérieur setTimeout puisse les prendre.

Résumé

Fonctions des flèches :

• Je n'ai pas this

• Je n'ai pas arguments

• Ne peut pas être appelé avec new

• Ils n'ont pas non plus super , mais nous ne l'avons pas encore étudié. Nous le ferons sur le chapitre Héritage de classe

C'est parce qu'ils sont destinés à de courts morceaux de code qui n'ont pas leur propre « contexte », mais qui fonctionnent plutôt dans le contexte actuel. Et ils brillent vraiment dans ce cas d’utilisation.