2

Vejam que o $(this) em cada caso abaixo aponta para um elemento diferente:

1º) Function:

$("button").click(function(){
    $("input").val(function(){ return $(this).val(); });
});      ↑                               ↑
         ¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯

2º) Arrow function:

      ↓¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯˥
$("button").click(function(){      ↓
    $("input").val(()=>{ return $(this).val(); });
});

Como fazer para que, no 2º caso, o $(this) aponte para o mesmo elemento que aponta no 1º caso, ou seja, o input?

Se para isso não devo usar o $(this), como referenciar uma variável dentro da arrow function que selecione o $("input") em questão?

3
  • Obrigado pelo comentário, mas eu precisava mesmo era de uma resposta conclusiva.
    – Sam
    Commented 26/03/2018 às 22:56
  • De qualquer forma fica a dica para quem puder pesquisar (ou até mesmo dá uma olhada na documentação) e escrever algo mais elaborado. :) Commented 26/03/2018 às 22:56
  • Ah tah rs... valeu!
    – Sam
    Commented 26/03/2018 às 22:57

1 Resposta 1

3

Esse efeito que vê foi um dos motivadores para a criação das Arrow Functions.

Veja algumas citações da documentação em relação a esse efeito:

Until arrow functions, every new function defined its own this value (...)

An arrow function does not newly define its own this (...)

Since arrow functions do not have their own this (...)

No separate this (...)

Por estas citações vê que uma Arrow Function não define o seu próprio this. Em vez disso usa o do contexto na qual está inserida.

Torna-se muito util em vários cenários. Passo a citar um da própria documentação, ainda que adaptado:

function Pessoa() {
  this.idade = 0;

  setInterval(function crescer() {
    this.idade++;
    console.log(`A idade é agora ${this.idade}`);
  }, 1000);
}

let p = new Pessoa();

Repare como o exemplo não funciona pois a função crescer define o seu próprio this que é diferente do de Pessoa. Por este motivo não consegue aceder à propriedade idade.

No entanto já irá funcionar com uma Arrow Function pois o this será o de Pessoa, que é o local onde ela está inserida:

function Pessoa() {
  this.idade = 0;

  setInterval(() => {
    this.idade++;
    console.log(`A idade é agora ${this.idade}`);
  }, 1000);
}

let p = new Pessoa();

Concluindo

Utilizando JQuery e uma arrow function, dentro dela $(this) nunca irá funcionar.

Contornando o problema

Apesar de não funcionar diretamente com $(this) existem formas de contornar o problema

  • Capturando o elemento selecionado numa variavel

    No código que apresentou consegue reproduzir o mesmo efeito guardando primeiramente o(s) elemento(s) obtido(s) com o seletor de input numa variável. Depois pode utiliza-la dentro da arrow function as vezes que quiser:

    $("button").click(function(){
        const input = $("input");
        input.val(()=>{ return input.val(); });
    });
    
  • Utilizando event.currentTarget

    Esta forma funciona quando o $(this) que se quer capturar vem de um evento, como por exemplo o de click. Infelizemente este não se enquadra no exemplo que tem na pergunta, ainda assim, deixo aqui como referencia.

    Nesse caso pode capturar também o objeto que representa o evento da ação, consegue obter o alvo do evento com event.currentTarget. Este alvo representa o elemento nativo de JS e por isso para ser utilizado como um objeto de JQuery tem de fazer $(event.currentTarget).

    Exemplo:

const coresDisponiveis = ['red', 'green', 'blue', 'yellow', 'cyan'];
$("button").click((event) => {
    let novaCor = Math.floor(Math.random() * coresDisponiveis.length);
    $(event.currentTarget).css('background-color', coresDisponiveis[novaCor]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Clique para trocar a cor</button>

2
  • Obg pela resposta. Resumindo, não tem como fazer o que a pergunta deseja?
    – Sam
    Commented 29/03/2018 às 3:32
  • @dvd Não tem como fazer diretamente. Resumindo o máximo possivel, não há como fazer $(this) funcionar dentro de uma array function com Jquery. Atualizei a resposta com mais informação em relação a isso.
    – Isac
    Commented 29/03/2018 às 9:44

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 .