Fonctions fléchées et déclarations de méthodes dans ES6 : pourquoi « ceci » ne fonctionne-t-il pas comme prévu dans les fonctions fléchées ?

Fonctions fléchées et déclarations de méthodes dans ES6

Lorsque vous explorez ES6, vous pouvez rencontrer le problème suivant :

var person = {
  name: "jason",

  shout: () => console.log("my name is ", this.name)
};

person.shout(); // Prints "my name is "

L'intention est que la fonction accède à la propriété name dans l'objet personne. Cependant, la console affiche uniquement « mon nom est ».

Explication :

Ce comportement découle de la nature distincte des fonctions de flèche dans ES6. Les fonctions fléchées, contrairement aux déclarations de fonctions traditionnelles, ne lient pas le mot-clé this. Au lieu de cela, ils héritent de cette liaison de leur portée environnante, qui, dans ce cas, est la portée globale.

Solution :

Pour résoudre ce problème, vous pouvez utilisez le modèle de déclaration de méthode ES6, qui préserve la liaison souhaitée de ceci :

var person = {
  name: "jason",

  shout() {
    console.log("my name is ", this.name);
  }
};

person.shout(); // Prints "my name is jason"

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!