Die Verwendung von ES6-Pfeilfunktionen mit lexikalischer thisBindung ist großartig.

Vor kurzem bin ich jedoch auf ein Problem gestoßen, das ich mit einer typischen jQuery-Klickbindung verwendet habe:

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

Verwenden Sie stattdessen eine Pfeilfunktion:

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

Und wird dann $(this)in einen ES5-Verschluss (self = this) konvertiert.

Kann Traceur "$ (this)" für die lexikalische Bindung ignorieren?

Das hat nichts mit Traceur zu tun und etwas auszuschalten. So funktioniert ES6 einfach. Es ist die spezifische Funktionalität, nach der Sie fragen, indem Sie =>statt verwenden function () { }.

Wenn Sie ES6 schreiben möchten, müssen Sie ständig ES6 schreiben, Sie können in bestimmten Codezeilen nicht ein- und ausschalten und Sie können die Funktionsweise definitiv nicht unterdrücken oder ändern =>. Selbst wenn Sie könnten, würden Sie nur mit einer bizarren Version von JavaScript enden, die nur Sie verstehen und die außerhalb Ihres angepassten Traceur niemals richtig funktionieren würde, was definitiv nicht der Sinn von Traceur ist.

Die Lösung dieses speziellen Problems besteht nicht darin this, Zugriff auf das angeklickte Element zu erhalten, sondern event.currentTarget:

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

jQuery bietet event.currentTargetspeziell, weil es jQuery noch vor ES6 nicht immer möglich ist, thisder Rückruffunktion ein a aufzuerlegen (dh, wenn es über an einen anderen Kontext gebunden war bind.

Ereignisbindung

$button.on('click', (e) => {
    var $this = $(e.currentTarget);
    // ... deal with $this
});

Schleife

Array.prototype.forEach.call($items, (el, index, obj) => {
    var $this = $(el);
    // ... deal with $this
});

Ein anderer Fall

Die Top-Antwort ist richtig und ich habe sie hochgestimmt.

Es gibt jedoch einen anderen Fall:

$('jquery-selector').each(() => {
    $(this).click();
})

Könnte behoben werden als:

$('jquery-selector').each((index, element) => {
    $(element).click();
})

Dies ist ein historischer Fehler in jQuery, bei dem der Index anstelle des Elements als erstes Argument verwendet wird:

.each (Funktion)

Funktionstyp
: Function( Integer index, Element element )
Eine Funktion, die für jedes übereinstimmende Element ausgeführt werden soll.

Siehe: https://api.jquery.com/each/#each-function

(Dies ist eine Antwort, die ich für eine andere Version dieser Frage geschrieben habe, bevor ich erfuhr, dass es sich um ein Duplikat dieser Frage handelt. Ich denke, die Antwort fasst die Informationen ziemlich klar zusammen, daher habe ich beschlossen, sie als Community-Wiki hinzuzufügen, obwohl sie größtenteils nur anders ist Formulierung der anderen Antworten.)

Das kannst du nicht. Das ist die Hälfte der Pfeilfunktionen, die sie schließen, thisanstatt ihre eigenen zu haben, die durch ihre Bezeichnung festgelegt werden. Für den Anwendungsfall in der Frage thismüsste der Handler a sein , wenn Sie beim Aufrufen des Handlers von jQuery festlegen möchtenfunction Funktion sein .

Wenn Sie jedoch einen Grund für die Verwendung eines Pfeils haben (vielleicht möchten Sie ihn thisfür das verwenden, was er außerhalb des Pfeils bedeutet), können Sie ihn verwenden, e.currentTargetanstatt, thiswenn Sie möchten :

class Game {
  foo(){
    this._pads.on('click', e => {                   // Note the `e` argument
      if(this.go) {
        $(e.currentTarget).addClass('active');      // Using it
      }
    });
  }
}

Das currentTargetObjekt on the event entspricht dem, was jQuery thisbeim Aufrufen Ihres Handlers festlegt .

Wie Meager in seiner Antwort auf dieselbe Frage sagte Wenn Sie ES6 schreiben möchten, müssen Sie ständig ES6 schreiben .

Wenn Sie also die Pfeilfunktion von ES6: verwenden (event)=>{}, müssen Sie $(event.currentTarget)stattdessen verwenden$(this) .

Sie können auch eine schönere und sauberere Art der Verwendung von currentTarget verwenden als ({currentTarget})=>{},

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

Ursprünglich wurde diese Idee von Rizzi Frank in @ Meagers Antwort kommentiert , und ich fand sie nützlich und ich denke, dass nicht alle Leute diesen Kommentar lesen werden, also habe ich ihn als diese andere Antwort geschrieben.