Warum schlägt „$(this)' in jQuery-Click-Handlern mit ES6-Pfeilfunktionen fehl?

ES6-Pfeilfunktionen und jQuery $(this): Bindungsverwirrung

ES6-Pfeilfunktionen stellen diese lexikalische Bindung bereit und vereinfachen den Code, indem sie die Notwendigkeit beseitigen für explizite bind()-Aufrufe. Bei Verwendung mit der Klickbindung von jQuery kann dieses Verhalten jedoch Probleme verursachen.

Unerwartetes Verhalten mit Pfeilfunktionen:

Beachten Sie den folgenden Code:

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

Durch Verwendung einer Pfeilfunktion stattdessen:

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

Die $(this)-Referenz wird in konvertiert ein Verschluss im ES5-Stil (self = this).

Verstehen der ES6-Pfeilfunktionsbindung:

Dieses Verhalten ist den ES6-Pfeilfunktionen inhärent und kein Problem mit Traceur Übersetzung. Pfeilfunktionen binden diese immer lexikalisch an den umschließenden Kontext. In diesem Fall die foo()-Methode.

Lösung mit event.currentTarget:

Um das Problem zu beheben, verwenden Sie event.currentTarget anstelle von $(this) to Greifen Sie innerhalb des Rückrufs der Pfeilfunktion auf das angeklickte Element zu:

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

jQuery stellt speziell event.currentTarget bereit, um Situationen zu berücksichtigen, in denen die Rückruffunktion erforderlich ist Möglicherweise haben Sie keinen Zugriff auf den richtigen Kontext.

Das obige ist der detaillierte Inhalt vonWarum schlägt „$(this)' in jQuery-Click-Handlern mit ES6-Pfeilfunktionen fehl?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!