Fonctions Arrow vs Déclaration de méthode dans es6

Lorsque vous plongez dans 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 d'avoir la fonction accéder à la propriété du nom au sein de l'objet personne. Cependant, la console imprime uniquement "Mon nom est."

Explication:

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

Solution:

pour résoudre ce problème, vous pouvez utiliser le modèle de déclaration de la méthode ES6, qui conserve la liaison souhaitée:

var person = {
  name: "jason",

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

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