Usando jQuery $ (this) com ES6 Arrow Functions (léxico esta binding)

Usando as funções de seta do ES6 com o léxico, this binding é ótima.

No entanto, encontrei um problema há pouco usando-o com uma binding de clique típica do jQuery:

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

Usando uma function de seta em vez disso:

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

E então $(this) é convertido para o fechamento do tipo ES5 (self = this).

É uma maneira de fazer o Traceur ignorar “$ (this)” para binding lexical?

Isso não tem nada a ver com o Traceur e desativar alguma coisa, isso é simplesmente como o ES6 funciona. É a funcionalidade específica que você está pedindo usando => vez de function () { } .

Se você quer escrever ES6, você precisa escrever ES6 o tempo todo, você não pode entrar e sair dele em certas linhas de código, e você definitivamente não pode suprimir ou alterar o caminho => funciona. Mesmo que você pudesse, você acabaria com uma versão bizarra de JavaScript que só você entende e que nunca funcionaria corretamente fora do seu Traceur personalizado, o que definitivamente não é o objective do Traceur.

A maneira de resolver esse problema em particular não é usar this para obter access ao elemento clicado, mas usar event.currentTarget :

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

O jQuery fornece event.currentTarget especificamente porque, mesmo antes do ES6, nem sempre é possível para o jQuery impor uma function de callback (isto é, se ele foi ligado a outro contexto via bind .

Ligação de evento

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

Loop

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

Outro caso

A resposta principal está correta e eu votei nela.

No entanto, há outro caso:

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

Poderia ser corrigido como:

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

(Esta é uma resposta que escrevi para outra versão desta pergunta, antes de aprender que era uma cópia desta pergunta. Acho que a resposta reúne a informação de forma bastante clara, então decidi adicioná-la como um wiki da comunidade, embora seja em grande parte diferente frase das outras respostas.)

Você não pode. Isso é metade do ponto de funções de flecha, eles fecham em cima this vez de ter o próprio deles que é ajustado como eles são chamados. Para o caso de uso na pergunta, se você quiser que this definido por jQuery ao chamar o manipulador, o manipulador precisaria ser uma function function.

Mas se você tem uma razão para usar uma flecha (talvez você queira usar this para o que significa fora da flecha), você pode usar e.currentTarget vez this se você gosta de:

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

O currentTarget no object de evento é o mesmo que o que o jQuery define ao chamar seu manipulador.