Maison >interface Web >js tutoriel >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 : pourquoi « ceci » ne fonctionne-t-il pas comme prévu dans les fonctions fléchées ?

Linda Hamilton
Linda Hamiltonoriginal
2024-12-15 13:41:09298parcourir

Arrow Functions vs. Method Declarations in ES6: Why Doesn't `this` Work as Expected in Arrow Functions?

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn