Maison > interface Web > js tutoriel > Pourquoi « ceci » ne fonctionne-t-il pas comme prévu dans les fonctions fléchées ES6 ?

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

Patricia Arquette
Libérer: 2024-12-12 12:06:16
original
423 Les gens l'ont consulté

Why Doesn't `this` Work as Expected in ES6 Arrow Functions?

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
Copier après la connexion

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);
Copier après la connexion

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;
Copier après la connexion

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);
  }
};
Copier après la connexion

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 de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal