ArrowFunction vs Função anônima

Tudo certo pessoal? Então fiquei com uma dúvida sobre as funções que são passadas no evento. Em um primeiro momento tentei usar arrowFunction então o código ficou assim:

campoFiltro.addEventListener("input", () => {
    console.log(this.value)
});

contudo so recebo no console undefined. Caso eu passe um parametro para a arrowFunction e imprimisse no cosole recebo o envetInput e conseguiria acessar o value do input, ficando assim:

campoFiltro.addEventListener("input", (e) => {
    console.log(e)
});

mas a dúvida é porque na arrowFunction eu tenho que passar um parametro e na função anônima eu não preciso? Basta eu apenas fazer isso:

campoFiltro.addEventListener("input", function () {
    console.log(this.value)
});

Atenciosamente;

Oi Rafael, tudo bom?

O this possui um outro comportamento quando utilizado em arrow functions. Dentro de uma arrow function ele possui um comportamento dinâmico, isto é, variando de acordo com o contexto de execução. Portanto, this é definido à partir das funções onde foram definidas (se uma arrow function é criada em um escopo global, o this fará referência a esse escopo global).

Nesse caso, a função arrow é uma função de callback, pois é passada como parâmetro de outra função, no caso, addEventListener. Portanto, this será vinculado ao elemento DOM que gerou o evento, que é o objeto Window. Por isso que deu undefined, pois o objeto Window não tem nenhuma propriedade value.

Concluindo, o this dentro de uma arrow function sempre vai ser referência ao objeto que ele já era referência no momento da criação da arrow function (nesse caso, o objeto window).

Espero ter ajudado, abraços e bons estudos =)