Comment la liaison lexicale affecte-t-elle le mot-clé « this » dans les fonctions fléchées ES6 ?

Comprendre la liaison lexicale de « ceci » dans les fonctions fléchées ES6

Dans le domaine de JavaScript, les fonctions fléchées introduisent un changement subtil mais impactant dans la façon dont le « ceci » le mot-clé se comporte. Contrairement aux déclarations de fonctions traditionnelles, les fonctions fléchées présentent une liaison lexicale, un concept qui régit la valeur de « ceci » dans leur portée.

Qu'est-ce que la liaison lexicale ?

Liaison lexicale fait référence au mécanisme dans lequel la valeur de « this » est déterminée par l'environnement lexical de la fonction, qui est la portée dans laquelle la fonction est définie. En revanche, les fonctions traditionnelles utilisent une liaison dynamique, où la valeur de « this » est déterminée par le contexte de l'appelant, même si la fonction est définie dans une portée externe.

Implications dans les fonctions fléchées

Les fonctions fléchées sont liées lexicalement, ce qui signifie qu'elles héritent de la valeur « this » de leur contexte environnant. Pour faire simple, "ceci" dans une fonction flèche fait toujours référence à l'objet qui contient la définition de la fonction flèche.

Exemple

Considérez l'extrait de code suivant :

var testFunction = () => {
  console.log(this)
};
testFunction();

Dans cet exemple, "this" à l'intérieur de la fonction flèche fait référence à l'objet global (fenêtre dans un navigateur). En effet, la fonction flèche est définie dans la portée globale et hérite de la valeur « this » de cette portée.

Contrairement aux fonctions traditionnelles

Déclarations de fonctions traditionnelles, sur d'un autre côté, utilisez la liaison dynamique. Si une fonction traditionnelle est définie dans un objet, « this » fait référence à cet objet lorsque la fonction est invoquée, quel que soit le contexte d'appel.

Par exemple, l'extrait de code suivant illustre la liaison dynamique :

var person = {
  name: 'John',
  greet: function() {
    console.log(this.name)
  }
};
person.greet(); // logs 'John'

En revanche, si nous utilisons une fonction flèche pour la méthode greet :

var person = {
  name: 'John',
  greet: () => {
    console.log(this.name)
  }
};
person.greet(); // logs undefined

Puisque la fonction flèche est liée lexicalement, « ceci » fait référence à l'objet global et non à l'objet personne, ce qui entraîne une sortie indéfinie.

Applications de la liaison lexicale

La liaison lexicale de « ceci » dans les fonctions fléchées a des implications significatives , en particulier pour les opérations asynchrones et la gestion des événements. En héritant de la valeur « this » du contexte environnant, les fonctions fléchées garantissent que l'objet correct est conservé pour les invocations de méthodes et les rappels d'événements.

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!