Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

addEventListener com sintaxe ES6 + this NÃO funciona

Em outro relato de dúvida similar eu vi que foi feito exatamente o que fiz, usando função anonima em formato ES6, e simplesmente o this não funciona:

let todosPacientes = document.querySelectorAll(".paciente");

todosPacientes.forEach((paciente) => {
    paciente.addEventListener("dblclick", () => {
        this.remove();
    });
});

Diferente de quando uso o event do addEventListener, junto com o currentTarget. Sem alterar a sintaxe, funciona perfeitamente:

todosPacientes.forEach((paciente) => {
    paciente.addEventListener("dblclick", (event) => {
        event.currentTarget.remove();
    });
});

Mas após diversos testes voltei a sintaxe tradicional do JS e o this incrivelmente funciona:

todosPacientes.forEach(function(paciente) {
    paciente.addEventListener("dblclick", function() {
        this.remove();
    });
});

Gostaria de entender o motivo dessa aparente inconsistência. Qual erro estou cometendo?

2 respostas
solução!

Fala ai Matheus, tudo bem? Entender o contexto do this é algo bem chato e complexo, sendo assim, recomendo dar uma lida nesse artigo do Lucas: https://imasters.com.br/javascript/javascript-entendendo-o-de-uma-vez-por-todas

Ele é muito bom e detalhado.

Espero ter ajudado.

Bom questionamento, sugiro ler o artigo que o parceiro passou acima, mas de forma bastante sucinta é bom saber que os arrow functions não possuem a propriedade this do objeto com o qual estamos trabalhando dentro do escopo, mas sim do escoo global, então se você for usar o this pra chamar algum valor relacionado ao objeto que você está trabalhando, neste caso o que vem antes do .addEventListener é sempre bom usar a sintaxe tradicional da função