Comment les fonctions fléchées en JavaScript gèrent-elles la liaison « this » et quelles sont les solutions de contournement ?

Fonctions fléchées et liaison : démystifier le comportement « ceci »

Les fonctions fléchées, une fonctionnalité JavaScript moderne, offrent une syntaxe concise pour déclarer des fonctions. Cependant, une différence notable entre les fonctions fléchées et les fonctions régulières est leur comportement concernant la liaison « ceci ».

Liaison « ceci » dans les fonctions fléchées

Les fonctions fléchées ne créent pas leur propre liaison « ceci » . Au lieu de cela, ils en héritent de la portée englobante. Cela signifie que « ceci » dans une fonction fléchée fait référence à la même valeur que « ceci » dans la fonction environnante ou la portée globale.

Un exemple de « ceci » non lié

Considérez l'exemple fourni dans la question :

var f = () => console.log(this);

Ici, « ceci » dans la fonction fléchée « f » n'est pas lié. Lorsque « f » est appelé, il utilise la liaison « this » de la portée globale, qui fait généralement référence à l'objet window. Par conséquent, l'appel de « fBound() » enregistrerait l'objet window au lieu de l'objet « o » comme prévu.

Liaison de « this » dans les fonctions fléchées

Bien que les fonctions fléchées ne prennent pas en charge liaison traditionnelle utilisant « bind », il existe des approches alternatives pour obtenir des fonctionnalités similaires :

• Utilisation de Regular Fonctions : Définir une fonction régulière comme intermédiaire, en liant 'this' à l'objet souhaité avant de renvoyer une fonction fléchée :

var fBound = () => {
  console.log(this);
}.bind(o);

• Utiliser les classes ES6 : Définissez une classe qui fournit la liaison 'this' souhaitée et utilisez les fonctions fléchées comme méthodes :

class MyClass {
  constructor() {
    this.f = () => console.log(this);
  }
}

const o = new MyClass();
o.f(); // logs the 'o' object

En conclusion, bien que les fonctions fléchées offrent de nombreux avantages, elles se comportent différemment concernant « cette » liaison par rapport aux fonctions normales. En comprenant cette distinction, vous pouvez utiliser efficacement les fonctions fléchées et des approches alternatives pour obtenir la liaison « ceci » souhaitée.

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!