Pourquoi « ceci » ne fonctionne-t-il pas comme prévu dans les fonctions fléchées ES6 ?

Fonctions fléchées et ceci

Lors de l'incorporation de propriétés dans des fonctions utilisant ES6, un problème survient lors de la tentative d'accès à cet objet.

var person = {
  name: "jason",

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

person.shout() // Should print out my name is jason

Cependant, l'exécution de ce code ne parvient pas à inclure le nom prévu, affichant uniquement « mon nom est ». Ce problème provient du comportement unique des fonctions fléchées.

Les fonctions fléchées ne sont pas liées à ceci, à des arguments ou à d'autres noms spéciaux. Lorsqu'un objet est créé, il se trouve dans la portée englobante et non à l'intérieur de l'objet. En examinant le code dans ces variantes, le problème devient plus évident :

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

et, lors de la traduction en une vague approximation de la syntaxe des flèches dans ES5 :

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

Dans les deux cas , ceci pour la fonction scream pointe vers la portée dans laquelle la personne est définie, et non la nouvelle portée associée à l'objet lorsqu'il est ajouté à la personne.

Alors que les fonctions fléchées ne peuvent pas reproduire le comportement prévu, ES6 propose une solution alternative en utilisant des modèles de déclaration de méthode pour économiser de l'espace :

var person = {
  name: "Jason",
  // ES6 "method" declaration - leaving off the ":" and the "function"
  shout() {
    console.log("Hi, my name is", this.name);
  }
};

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!