Używanie funkcji strzałkowych ES6 z thispowiązaniami leksykalnymi jest świetne.

Jednak przed chwilą napotkałem problem, używając go z typowym powiązaniem kliknięcia jQuery:

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

Zamiast tego użyj funkcji strzałki:

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

A następnie $(this)jest konwertowany na zamknięcie typu ES5 (self = this).

Czy jest sposób, aby Traceur ignorował "$ (this)" dla leksykalnego wiązania?

To nie ma nic wspólnego z Traceur i wyłączaniem czegoś, tak po prostu działa ES6. Jest to konkretna funkcja, o którą prosisz, =>zamiast function () { }.

Jeśli chcesz napisać ES6, musisz pisać ES6 cały czas, nie możesz włączać i wyłączać tego w pewnych wierszach kodu, a na pewno nie możesz tłumić ani zmieniać sposobu =>działania. Nawet gdybyś mógł, skończyłbyś z jakąś dziwaczną wersją JavaScript, którą tylko Ty rozumiesz i która nigdy nie działałaby poprawnie poza Twoim dostosowanym Traceur, co zdecydowanie nie jest celem Traceur.

Aby rozwiązać ten konkretny problem, nie należy używać thisdo uzyskania dostępu do klikniętego elementu, ale zamiast tego użyć event.currentTarget:

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

jQuery zapewnia event.currentTargetszczególnie, ponieważ nawet przed ES6 nie zawsze jest możliwe, aby jQuery narzucił funkcję thiswywołania zwrotnego (tj. jeśli została powiązana z innym kontekstem za pośrednictwem bind.

Wiązanie wydarzenia

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

Pętla

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

Inna sprawa

Najlepsza odpowiedź jest poprawna i zagłosowałem za nią.

Jest jednak inny przypadek:

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

Można to naprawić jako:

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

Jest to historyczny błąd w jQuery, który umieszcza indeks zamiast elementu jako pierwszy argument:

.each (funkcja)

Typ funkcji : Function( Integer index, Element element )
funkcja do wykonania dla każdego dopasowanego elementu.

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

(To jest odpowiedź, którą napisałem na inną wersję tego pytania, zanim dowiedziałem się, że była to duplikat tego pytania. Myślę, że odpowiedź zbiera informacje dość wyraźnie, więc zdecydowałem się dodać ją jako wiki społeczności, chociaż jest ona w dużej mierze po prostu inna sformułowanie innych odpowiedzi.)

Nie możesz. To połowa punktu funkcji strzałkowych, zamykają się thiszamiast mieć własne, które są ustawione przez ich wywołanie. W przypadku użycia w pytaniu, jeśli chcesz thisustawić przez jQuery podczas wywoływania procedury obsługi, procedura obsługi musiałaby być functionfunkcją.

Ale jeśli masz powód do używania strzałki (być może chcesz użyć thisdo tego, co to oznacza poza strzałką), możesz użyć e.currentTargetzamiast, thisjeśli chcesz:

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

Obiekt currentTargetzdarzenia jest taki sam, jak ustawia jQuery thispodczas wywoływania programu obsługi.

Jak powiedział Meager w swojej odpowiedzi na to samo pytanie, jeśli chcesz pisać ES6, musisz cały czas pisać ES6 ,

więc jeśli używasz funkcji strzałkowej ES6:, (event)=>{}musisz użyć $(event.currentTarget)zamiast $(this).

możesz też użyć ładniejszego i czystszego sposobu korzystania z currentTarget jako ({currentTarget})=>{},

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

pierwotnie pomysł ten został skomentowany przez rizzi Frank w odpowiedzi @ Meager i uznałem , że jest przydatny i myślę, że nie wszyscy ludzie przeczytają ten komentarz, więc napisałem go jako kolejną odpowiedź.