Erro do 'this' no manipulador de seta JavaScript

Ultimamente, tornou-se moda usar funções de seta em todos os lugares em vez de funções comuns. No entanto, essas funções têm uma desvantagem - elas não preservam o this. Vamos ver qual problema pode ser encontrado por causa disso.

Suponha que temos um botão:

<button>texto</button>

Vamos obter uma referência a este botão em uma variável:

let button = document.querySelector('button');

Vamos adicionar um manipulador de eventos ao botão, usando uma função de seta:

button.addEventListener('click', () => {
	console.log(this.textContent);
});

É aqui que nos surpreendemos: o this na função de seta não se referirá ao elemento no qual o evento ocorreu.

Vamos ver o que pode ser feito sobre isso.

Solução um

Podemos desistir de usar this e usar a variável à qual o evento está vinculado:

button.addEventListener('click', () => {
	console.log(button.textContent);
});

Solução dois

Podemos obter o elemento ao qual o evento está vinculado através de event.target:

button.addEventListener('click', (event) => {
	console.log(event.target.textContent);
});

Solução três

Podemos desistir da função de seta e usar uma função comum:

button.addEventListener('click', function() {
	console.log(this.textContent);
});