Comment « ce » mot-clé se comporte-t-il différemment dans les fonctions fléchées ES6 par rapport aux fonctions traditionnelles ?

Fonctions fléchées et ceci

Dans ES6, les fonctions fléchées offrent une syntaxe concise pour définir les fonctions. Cependant, leur comportement diffère des fonctions traditionnelles dans la façon dont elles gèrent le mot-clé this.

Considérez le code suivant :

var person = {
  name: "jason",
  shout: () => console.log("my name is ", this.name) // Error: This is unbound
};

person.shout();

Ici, l'intention est d'enregistrer "je m'appelle Jason" lorsque person.shout() est invoqué. Cependant, le résultat est "mon nom n'est pas défini". En effet, les fonctions fléchées n'ont pas leur propre liaison. Au lieu de cela, ils héritent de la valeur this de la portée englobante.

Dans ce cas, la portée englobante est la portée globale, où this fait référence à l'objet window. Étant donné que l'objet window n'a pas de propriété name, l'expression this.name est évaluée comme non définie.

Pour résoudre ce problème, vous pouvez utiliser le fait que les fonctions fléchées ne le lient pas. En plaçant la fonction flèche directement à l'intérieur du littéral de l'objet, vous pouvez hériter de la valeur correcte de l'objet :

var person = {
  name: "jason",
  shout: function() {
    console.log("my name is ", this.name)
  }
};

person.shout(); // Output: my name is jason

Vous pouvez également utiliser une déclaration de méthode ES6 sans le mot-clé de fonction et la syntaxe :

var person = {
  name: "jason",
  shout() {
    console.log("my name is ", this.name)
  }
};

person.shout(); // Output: my name is jason

En utilisant ces techniques, vous pouvez les utiliser efficacement dans les fonctions fléchées et obtenir le résultat souhaité.

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!