0

Ao executar o seguinte código:

$("button").on("click", function(){
   console.log("Meu valor é: " + $(this).val());   
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button value="1">Clique-me</button>

O valor do botão é retornado normalmente. Mas em:

$("button").on("click", ()=>{
   console.log("Meu valor é " +$(this).val());   
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button value="1">Clique-me</button>

Usando arrow function no evento acusa o erro no jQuery:

Uncaught TypeError: Cannot read property 'toLowerCase' of undefined

Vejam que estou a usar a última versão 3.3.1 do jQuery.

Alguém saberia dizer por quê a arrow function não funciona em casos de eventos do jQuery visto que o ES6 não é algo tão novo assim (também chamado de ECMAScript 2015) lançado em junho de 2015 (quase 3 anos!)?

1
  • Diretamente não há como. Mas pode fazer uso do event.currentTarget que é o alvo do evento. Veja esta pergunta no SOen
    – Isac
    Commented 27/03/2018 às 1:23

1 Resposta 1

3

A arrow function funciona com o jQuery, o que não funciona é o $(this). Isso não é implementando pelo jQuery porque não é possível.

Arrow functions don't have their own this binding so it's technically impossible to use the this binding jQuery provides with an arrow function.

Tradução livre:

Arrow functions não são propriamente vinculadas ao this, então é tecnicamente impossível usar a vinculação ao this fornecida pelo jQuery em uma arrow function.

Isso é descrito na especificação do ECMAScript2015:

An ArrowFunction does not define local bindings for arguments, super, this, or new.target. Any reference to arguments, super, this, or new.target within an ArrowFunction must resolve to a binding in a lexically enclosing environment. Typically this will be the Function Environment of an immediately enclosing function.

Tradução livre:

Uma Arrow function não define um vínculo local para arguments, super, this ou new.target. Qualquer referência a arguments, super, this ou new.target em uma Arrow function deve ser vinculado ao escopo léxico ao qual ela pertence. Tipicamente, o escopo adotado será o da função imediatamente acima.

Para contornar o problema, você pode pegar o objeto de origem do evento através do parâmetro da função, assim poderá acessar seus atributos:

$("button").on("click", event =>{
    console.log("Meu valor é " +event.target.getAttribute('value'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button value="1">Clique-me</button>

2
  • 1
    Poderia traduzir o texto (adaptar com sua palavras seria o ideal)
    – Syzoth
    Commented 27/03/2018 às 2:33
  • @GuilhermeNascimento Feito! Foi um pouco difícil definir quais palavras deveriam ter sido traduzidas e quais não, já que muitas delas são "jargões universais" da área. Caso eu tenha traduzido alguma palavra que não deveria, ou deixado de traduzir, avisem-me que que efetuarei a correção. Ou até mesmo edite a pergunta e aplique-a. Caso haja um erro, façam o mesmo. Commented 27/03/2018 às 14:59

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .