Comment les fonctions fléchées gèrent-elles le mot-clé « this » en JavaScript ?

Fonctions fléchées et « ceci »

Dans ES6, les fonctions fléchées introduisent une nouvelle approche de la définition des méthodes. Cependant, il existe une différence notable entre les fonctions fléchées et les fonctions traditionnelles lorsqu'il s'agit d'accéder au mot-clé « this ».

Le problème :

Considérez le code suivant :

var person = {
  name: "jason",

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

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

Bien que le résultat escompté soit d'imprimer « je m'appelle Jason », la console affiche uniquement « je m'appelle ». En effet, les fonctions fléchées se comportent différemment des fonctions traditionnelles en termes de liaison « ceci ».

L'explication :

Contrairement aux fonctions traditionnelles, les fonctions fléchées ne lient pas le ' this' mot-clé à la portée contenant. Au lieu de cela, ils héritent de la liaison « this » du contexte environnant. Dans l'exemple ci-dessus, le « ceci » dans la fonction flèche fait référence à l'objet global, et non à l'objet « personne ».

La solution :

Il existe plusieurs façons de résoudre ce problème :

1. Utilisez un lien Fonction :

// Bind 'this' to the 'person' object
var shoutBound = function() { console.log("my name is ", this.name); }.bind(person);

// Assign the bound function to the 'shout' property
person.shout = shoutBound;

2. Utiliser une fonction traditionnelle :

// Define a traditional function with 'this' bound to 'person'
person.shout = function() { console.log("my name is ", this.name); };

3. Utiliser Déclaration de la méthode ES6 :

// ES6 method declaration implicitly binds 'this' to the object
person = {
  name: "jason",

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

En comprenant les différents comportements de fonctions fléchées concernant la liaison « ce », vous pouvez écrire du code efficace et flexible dans ES6.

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!