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

Liaison lexicale de « ceci » dans les fonctions fléchées ES6

Les fonctions fléchées dans ES6 sont réputées pour leur comportement de liaison lexicale unique de « ceci ». " Contrairement à d'autres fonctions JavaScript où « this » est lié dynamiquement, les fonctions fléchées conservent une portée lexicale, attribuant « this » à la même valeur que son contexte englobant.

Pour illustrer ce concept, considérons le code suivant :

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

Contrairement au comportement JavaScript traditionnel où « ceci » ferait référence à l'objet global (fenêtre), les fonctions fléchées capturent la valeur « ceci » du contexte englobant. Dans cet exemple, "this" ferait référence à la portée globale (fenêtre) puisque testFunction est défini en dehors de tout objet.

De plus, la liaison lexicale garantit que "this" reste cohérent tout au long de la durée de vie de la fonction flèche. Prenons l'exemple suivant :

function Person(){
  this.age = 0;

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

var p = new Person();

Ici, la fonction flèche capture la valeur "this" de l'objet Person, lui permettant d'accéder et de modifier ses propriétés (dans ce cas, en incrémentant la propriété age). Ce comportement garantit que « ceci » fait toujours référence au contexte correct, quelle que soit la façon dont la fonction fléchée est appelée ou le contexte d'exécution change.

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!