O uso de funções de seta ES6 com this
encadernação lexical é ótimo.
No entanto, deparei-me com um problema atrás, usando-o com uma ligação típica de clique em jQuery:
class Game {
foo() {
self = this;
this._pads.on('click', function() {
if (self.go) { $(this).addClass('active'); }
});
}
}
Usando uma função de seta:
class Game {
foo() {
this._pads.on('click', () => {
if (this.go) { $(this).addClass('active'); }
});
}
}
E, em seguida, $(this)
é convertido em fechamento do tipo ES5 (self = this).
É uma maneira de Traceur ignorar "$ (this)" para ligação lexical?
javascript
jquery
ecmascript-6
arrow-functions
JRodl3r
fonte
fonte
.on()
realmente tem umthis
valor útil para você. Para mim, é muito mais clarothis
referir-se ao destino do evento do que ter que passar no evento e encontrar o destino manualmente. Eu não brinquei muito com as funções de seta, mas parece que seria confuso ir e voltar com funções anônimas.Respostas:
Isso não tem nada a ver com o Traceur e desativar algo, é simplesmente assim que o ES6 funciona. É a funcionalidade específica que você está solicitando usando em
=>
vez defunction () { }
.Se você deseja escrever o ES6, precisa escrever o ES6 o tempo todo, não pode entrar e sair dele em determinadas linhas de código e, definitivamente, não pode suprimir ou alterar a maneira como
=>
funciona. Mesmo que você pudesse, você acabaria com uma versão bizarra do JavaScript que somente você entende e que nunca funcionaria corretamente fora do seu Traceur personalizado, o que definitivamente não é o objetivo do Traceur.A maneira de resolver esse problema específico não é usar
this
para obter acesso ao elemento clicado, mas usarevent.currentTarget
:O jQuery fornece
event.currentTarget
especificamente porque, mesmo antes do ES6, nem sempre é possível para o jQuery impor umathis
função de retorno de chamada (ou seja, se ele estava vinculado a outro contexto viabind
.fonte
.on
chamadas delegadas ,this
na verdade éevent.currentTarget
.this
==event.currentTarget
. Não?this
eevent.currentTarget
são os mesmos, a menos quethis
estejam ligados ao escopo anexo, como acontece com uma função de seta ES6.Ligação de evento
Ciclo
fonte
$jQueryElements.each()
? jQuery realmente envia alguns argumentos para cada objeto, para que você não precise disso => É$(...).each((index, el) => console.log(el))
Outro caso
A resposta principal está correta e eu votei positivamente.
No entanto, há outro caso:
Pode ser corrigido como:
Este é um erro histórico no jQuery que coloca o índice , em vez do elemento como o primeiro argumento:
Consulte: https://api.jquery.com/each/#each-function
fonte
$('jquery-selector').map
(Esta é uma resposta que eu escrevi para outra versão desta pergunta, antes de aprender que era uma duplicata desta pergunta. Acho que a resposta reúne as informações com bastante clareza, então decidi adicioná-las como um wiki da comunidade, embora seja amplamente diferente formulação das outras respostas.)
Você não pode. Isso é metade do ponto das funções das setas, elas fecham em
this
vez de ter as suas próprias, definidas pela forma como são chamadas. Para o caso de uso da pergunta, se você desejarthis
definir pelo jQuery ao chamar o manipulador, o manipulador precisará ser umafunction
função.Mas se você tiver um motivo para usar uma seta (talvez você queira usar
this
o que significa fora da seta), poderá usar eme.currentTarget
vez de,this
se quiser:O
currentTarget
objeto on the event é igual ao que o jQuery definethis
ao chamar seu manipulador.fonte
Como Meager disse em sua resposta sobre a mesma pergunta: se você deseja escrever o ES6, precisa escrever o ES6 o tempo todo ,
portanto, se você estiver usando a função de seta do ES6:,
(event)=>{}
precisará usar em$(event.currentTarget)
vez de$(this)
.você também pode usar uma maneira mais agradável e limpa de usar o currentTarget como
({currentTarget})=>{}
,originalmente essa idéia foi comentada por rizzi frank na resposta de @ Meager, e eu achei útil e acho que nem todas as pessoas lerão esse comentário, então eu o escrevi como outra resposta.
fonte