Mit jQuery $(this) mit ES6 Pfeil-Funktionen (lexikalische dieser Bindung)

Verwendung von ES6 Pfeil-Funktionen, mit lexikalischen this Bindung ist sehr gut.

Aber ich lief in ein Problem, einen Augenblick vor dem Einsatz mit einem typischen jQuery-click-Bindung:

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

Mit einem Pfeil-Funktion statt:

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

Dann $(this) umgewandelt wird, ES5 (self = this) Verschluss.

Ist ein Weg, um Traceur ignorieren "$(this)" für die lexikalische Bindung?

Falls eine der Antworten unter beantwortet Ihre Frage, vergessen Sie nicht, markieren Sie es als akzeptiert. Wenn nicht, vielleicht könnten Sie klären, was Sie sonst noch wissen müssen?
das scheint ein perfektes Beispiel dafür, nicht zu verwenden wenn ein Pfeil Funktion seit .on() hat in der Tat eine this Wert nützlich für Sie. Für mich ist es viel klarer mit this bezogen auf das Ereignisziel, als zum bestehen der Veranstaltung und finden Sie das Ziel manuell. Ich habe noch nicht viel gespielt mit Pfeil-Funktionen, aber es scheint, wie es wäre verwirrend hin und her zu gehen mit anonymen Funktionen.

InformationsquelleAutor JRodl3r | 2014-12-27

  1. 149

    Dies hat nichts zu tun mit Traceur und drehen etwas aus, das ist einfach wie ES6 funktioniert. Es ist die spezifische Funktion Sie für Fragen mithilfe => statt function () { }.

    Wenn Sie schreiben wollen, ES6, die Sie schreiben müssen ES6 die ganze Zeit, Sie können nicht schalten und auf bestimmte Zeilen von code, und Sie werden definitiv nicht zu unterdrücken oder zu verändern, wie => funktioniert. Selbst wenn Sie könnten, würden Sie nur am Ende mit einigen bizarren version von JavaScript, die nur Sie verstehen, und die würden nie richtig arbeiten außerhalb Ihrer individuellen Traceur, was sicherlich nicht der Punkt der Traceur.

    Den Weg zur Lösung dieses speziellen Problems ist nicht zu verwenden this Zugriff auf das angeklickte element, sondern verwenden Sie stattdessen event.currentTarget:

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

    jQuery bietet event.currentTarget speziell, weil, noch bevor ES6, es ist nicht immer möglich für jQuery zu verhängen this auf die callback-Funktion (dh, wenn es gebunden wurde, zu einem anderen Kontext über bind.

    Beachten Sie, obwohl es nur abweicht, die für die Delegierte .on fordert this ist eigentlich event.currentTarget.
    Ist diese Antwort ok? Wie loganfsmyth darauf hingewiesen, this == event.currentTarget. Nein?
    Nein. this und event.currentTarget sind die gleichen, es sei denn this ist gebunden an den umschließenden scope, als mit einem ES6-Pfeil-Funktion.
    wenn du sparen willst-code können Sie auch auch destructure es: ({currentTarget}) => { $(currentTarget).addClass('active') }

    InformationsquelleAutor meagar

  2. 42

    Veranstaltung verbindlich

    $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
});

    InformationsquelleAutor Ryan Huang

  3. 27

    Ein weiterer Fall

    Die Obere Antwort ist richtig und ich habe oben-gewählt.

    Es ist jedoch ein anderer Fall:

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

    Behoben werden konnte:

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

    InformationsquelleAutor Tyler Long

  4. 6

    (Dies ist eine Antwort, die ich schrieb für eine andere version dieser Frage, vor dem lernen war es ein Duplikat dieser Frage. Ich denke, die Antwort zusammen zieht die Informationen ziemlich gut, also beschloss ich, fügen Sie es als community-wiki, obwohl es im wesentlichen nur eine andere Formulierung für die anderen Antworten.)

    Können Sie nicht. Das ist die Hälfte der Punkt-Pfeil-Funktionen, schließen Sie über this anstatt Ihre eigenen gesetzte, wie Sie genannt werden. Für den Anwendungsfall in Frage, wenn Sie wollen this gesetzt von jQuery beim Aufruf der handler der handler müsste function Funktion.

    Aber wenn Sie einen Grund haben, mit einem Pfeil (vielleicht Sie verwenden möchten this für das, was es bedeutet, außerhalb der Pfeil), können Sie e.currentTarget statt this wenn Sie mögen:

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

    Den currentTarget auf das event-Objekt ist das gleiche wie das, was jQuery setzt this um beim Aufruf der Prozedur.

    InformationsquelleAutor

Schreibe einen Kommentar