Comment les fonctions fléchées ES6 gèrent-elles le mot-clé « this » ?

Fonctions fléchées et liaison lexicale de "this" dans ES6

L'une des caractéristiques distinctives des fonctions fléchées dans ES6 est leur gestion unique du mot-clé "this". Contrairement aux fonctions régulières, qui lient dynamiquement « ceci » au contexte d'invocation de la fonction, les fonctions fléchées lient lexicalement « ceci » à la portée lexicale englobante.

Cela signifie que « ceci » dans une fonction fléchée fait toujours référence à l'objet. qui contient la définition de la fonction flèche. Par exemple :

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

testFunction();

Dans ce code, "this" dans la fonction flèche ne fait pas référence à la fonction flèche grasse elle-même, comme vous l'avez spéculé. Au lieu de cela, il fait référence à l'objet qui contient la définition de la fonction fléchée. Puisque la fonction flèche est définie dans la portée globale, « ceci » aura un contexte global. Par conséquent, la sortie du code sera l'objet global.

La liaison lexicale est bénéfique dans les situations où la valeur de "this" est susceptible de changer pendant l'exécution de la fonction. Par exemple, considérons l'exemple suivant :

function Person() {
  this.age = 0;

  setInterval(() => {
    this.age++; // |this| properly refers to the person object
  }, 1000);
}

var p = new Person();

Dans cet exemple, la fonction de flèche capture la valeur « this » de l'objet Person englobant. Cela garantit que l'opération d'incrémentation est toujours effectuée sur la bonne instance de personne, même si le rappel setTimeout est invoqué de manière asynchrone et que le contexte d'exécution a changé.

En résumé, les fonctions fléchées dans ES6 lient lexicalement "this" au portée lexicale englobante. Cela permet à "this" de faire référence au même objet quel que soit le contexte d'invocation de la fonction, ce qui facilite la gestion de "this" dans des scénarios de fonctions asynchrones ou imbriquées.

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!