Comprendre les fonctions de flèche JavaScript et leur liaison «cette»

Il existe des différences clés entre les fonctions de flèche et les fonctions ordinaires dans cette liaison. 1. La fonction de flèche ne se lie pas à la sienne, mais hérite de la portée périphérique, c'est-à-dire la portée lexicale; 2. Celui d'une fonction ordinaire dépend de la méthode d'appel, qui fait souvent que cela pointe vers l'objet global dans le rappel; 3. L'utilisation des fonctions de flèche peut éviter de tels problèmes, ce qui convient au maintien de cette cohérence; 4. Les situations où les fonctions de flèche ne sont pas recommandées incluent les méthodes d'objet, les constructeurs et les scénarios qui nécessitent dynamiques comme le traitement des événements; 5. Lorsque vous utilisez les fonctions Arrow dans la méthode du prototype, cela ne pointera pas vers l'instance, mais la portée externe.

Les fonctions Arrow dans JavaScript peuvent sembler être juste un moyen plus court d'écrire des expressions de fonction, mais elles sont livrées avec une différence majeure qui déclenche beaucoup de développeurs: comment ils gèrent le this -clé.

Contrairement aux fonctions régulières, les fonctions Arrow n'ont pas this leur. Au lieu de cela, ils l'héritent du contexte environnant. Cela peut être super pratique - ou vraiment déroutant - en fonction de la façon et de l'endroit où vous les utilisez.

Comment «ce» fonctionne dans des fonctions régulières

Dans une fonction normale, la valeur de this dépend de la façon dont la fonction est appelée. C'est pourquoi vous voyez souvent la confusion lorsque vous utilisez this rappels ou méthodes intérieurs.

Par exemple:

 const user = {
  Nom: "Alex",
  saluer: function () {
    setTimeout (function () {
      console.log ("bonjour", this.name); 
    }, 100);
  }
};

user.greet (); // Bonjour, indéfini

À l'intérieur du setTimeout , this ne fait plus référence à l'objet user . En mode non strict, il pointe vers l'objet global ( window dans les navigateurs), ce qui signifie que this.name undefined .

Pour résoudre ce problème, les développeurs faisaient quelque chose comme:

 const Self = this;
setTimeout (function () {
  console.log ("bonjour", self.name); 
}, 100);

Ou lier this explicitement.

Les fonctions de flèche capturent «ce» lexicalement

Entrez maintenant la fonction flèche. Il ne se lie pas à this . Au lieu de cela, il utilise this valeur de la fonction parentale non-zone la plus proche. C'est ce qu'on appelle la portée lexicale.

Réécriture de l'exemple précédent avec une fonction flèche:

 const user = {
  Nom: "Alex",
  saluer: function () {
    setTimeout (() => {
      console.log ("bonjour", this.name); 
    }, 100);
  }
};

user.greet (); // Bonjour, Alex

C'est beaucoup plus propre. La fonction Arrow ne crée pas this , donc this.name fait correctement référence à l'objet user .

Ce comportement rend les fonctions Arrow idéales pour les rappels courts où vous souhaitez préserver l' this .

Quand ne pas utiliser les fonctions flèches

Même si les fonctions Arrow sont idéales pour this lexical, elles ne sont pas toujours le bon choix.

Voici quelques situations où vous devez les éviter:

• Comme méthodes d'objet (sauf si vous souhaitez capturer l' this )
• En tant que constructeurs - les fonctions de flèche ne peuvent pas être utilisées avec new
• Lorsque vous avez besoin de this , comme dans les gestionnaires d'événements ou les méthodes DOM

Par exemple:

 const Button = document.QuerySelector ('bouton');

Button.AddeventListener ('click', () => {
  console.log (ceci); // fenêtre / global, pas le bouton
});

Si vous vous attendez à this se réfère à l'élément cliqué, utilisez plutôt une fonction régulière:

 Button.AdDeventListener ('click', function () {
  console.log (ceci); // l'élément bouton
});

Une note rapide sur les méthodes prototypes

Vous ne pouvez pas non plus utiliser les fonctions Arrow lors de la définition des méthodes de prototype si vous vous attendez à this se réfère à l'instance:

 fonction de fonction (nom) {
  this.name = name;
}

Personne.prototype.sayhi = () => {
  console.log ("Salut", this.name);
};

const p = new personne ("Jamie");
p.sayhi (); // salut, indéfini

Encore une fois, parce que la fonction de flèche n'a pas la this , elle fait référence à la portée extérieure, qui est probablement l'objet global.

Alors oui, les fonctions Arrow sont idéales pour garder this cohérent sans avoir à .bind() ou à utiliser self = this . Mais ils ne sont pas un remplacement sans rendez-vous partout - surtout lorsque vous voulez que this change en fonction de la façon dont la fonction est appelée.

Utilisez-les là où la lexicale this aide à simplifier votre code et à respecter les fonctions régulières lorsque dynamique this est nécessaire.

Fondamentalement, c'est tout.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!