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>