Error de this en el controlador de flecha JavaScript

Últimamente se ha puesto de moda usar funciones de flecha en todas partes en lugar de las ordinarias. Sin embargo, estas funciones tienen una trampa: no preservan el this. Veamos con qué problema nos podemos encontrar debido a esto.

Supongamos que tenemos un botón:

<button>text</button>

Obtengamos una referencia a este botón en una variable:

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

Agreguemos un controlador de eventos al botón, usando una función de flecha:

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

Aquí es donde nos espera una sorpresa: this en la función de flecha no se referirá al elemento en el que ocurrió el evento.

Veamos qué se puede hacer al respecto.

Solución uno

Podemos dejar de usar this y usar la variable a la que está vinculado el evento:

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

Solución dos

Podemos obtener el elemento al que está vinculado el evento a través de event.target:

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

Solución tres

Podemos prescindir de la función de flecha y usar una función ordinaria:

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