Comment puis-je conserver la liaison « this » avec « $(this) » de jQuery dans les fonctions fléchées ES6 ?

Préserver cette liaison lexicale avec jQuery $(this) dans les fonctions fléchées ES6

Lorsque vous travaillez avec les liaisons de clic jQuery, les développeurs peuvent rencontrer un problème lorsque vous essayez d'utiliser les fonctions fléchées ES6 avec cette liaison lexicale. En effet, les fonctions fléchées dans ES6 lient lexicalement ceci, ce qui peut entraîner un comportement inattendu lors de l'utilisation de jQuery, qui attend une fermeture avec une valeur this différente.

Dans l'exemple fourni :

this._pads.on('click', () => {
  if (this.go) { $(this).addClass('active'); }
});

La fonction de flèche lie ceci lexicalement, ce qui fait que $(this) fait référence à l'objet Game plutôt qu'à l'élément cliqué. Pour résoudre ce problème, il est nécessaire d'utiliser event.currentTarget au lieu de $(this):

this._pads.on('click', (event) => {
  if (this.go) { $(event.currentTarget).addClass('active'); }
});

Cela garantit que $(this) référence correctement l'élément cliqué, car jQuery fournit explicitement event.currentTarget à gérer les scénarios dans lesquels cette valeur peut ne pas être cohérente.

Comprendre la liaison lexicale dans ES6

Les fonctions fléchées ES6 ont une liaison lexicale this, ce qui signifie qu'elles héritent de la valeur this de leur contexte environnant. Cela peut être à la fois avantageux et difficile, car cela peut éviter des problèmes de liaison accidentels, mais nécessite également une attention particulière lorsque vous travaillez avec des rappels.

Conclusion

Lors de l'utilisation des fonctions fléchées ES6 avec Liaisons de clic jQuery, il est important d'être conscient du lexical de cette liaison et d'envisager d'utiliser event.currentTarget pour accéder explicitement à l'élément cliqué. Cela garantit un fonctionnement correct et évite un comportement inattendu dû à la variation de ces valeurs.

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!