Pourquoi `$(this)` échoue-t-il dans les gestionnaires de clics jQuery avec les fonctions fléchées ES6 ?

Fonctions fléchées ES6 et jQuery $(this) : Confusion de liaison

Les fonctions fléchées ES6 fournissent lexicalement cette liaison, simplifiant le code en éliminant le besoin pour les appels explicites à bind(). Cependant, lorsqu'il est utilisé avec la liaison de clic de jQuery, ce comportement peut provoquer des problèmes.

Comportement inattendu avec les fonctions fléchées :

Considérez le code suivant :

class Game {
  foo() {
    this._pads.on('click', function() {
      if (this.go) { $(this).addClass('active'); }
    });
  }
}

En utilisant une fonction flèche à la place :

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

La référence $(this) est convertie à une fermeture de style ES5 (self = this).

Comprendre la liaison de la fonction de flèche ES6 :

Ce comportement est inhérent aux fonctions de flèche ES6, et ne constitue pas un problème avec Traduction du traceur. Les fonctions fléchées lient toujours cela lexicalement au contexte englobant. Dans ce cas, la méthode foo().

Solution utilisant event.currentTarget :

Pour résoudre le problème, utilisez event.currentTarget au lieu de $(this) pour accéder à l'élément cliqué dans le rappel de la fonction flèche :

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

jQuery fournit spécifiquement event.currentTarget pour s'adapter aux situations où la fonction de rappel peut ne pas avoir accès au bon contexte.

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!