Pourquoi `$(this)` se comporte-t-il mal avec les fonctions fléchées jQuery et ES6 ?

Utilisation de $(this) de jQuery avec les fonctions fléchées ES6 : liaison lexicale de cette

Lors de l'utilisation de $(this) de jQuery avec les fonctions fléchées ES6, les développeurs peuvent rencontrer un problème où $(this) est converti en une fermeture de style ES5 en utilisant self = this. Ce comportement est dû à la nature de liaison lexicale des fonctions fléchées.

Problème :

Le code suivant illustre le problème :

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

Quand une fonction de flèche est utilisée à la place :

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

$(this) est converti en une fermeture de style ES5, conduisant à un résultat inattendu comportement.

Solution :

Ce problème est une caractéristique inhérente aux fonctions fléchées ES6 et ne peut pas être contourné à l'aide de Traceur. Pour résoudre ce problème, il faut éviter d'utiliser ceci pour accéder à l'élément cliqué. Au lieu de cela, la propriété event.currentTarget peut être utilisée :

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

jQuery fournit spécifiquement event.currentTarget pour les situations où cette liaison peut être ambiguë en raison de facteurs externes, tels que la fonction de rappel étant liée à un autre contexte. via .bind().

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!