Kļūda ar this JavaScript bulta notikuma apstrādātājā

Pēdējā laikā ir kļuvis modē izmantot visur bulta funkcijas parasto vietā. Tomēr šīm funkcijām ir viens mīnuss - tās nesaglabā this. Apskatīsim, ar kādu problēmu varam saskarties šī dēļ.

Pieņemsim, ka mums ir poga:

<button>text</button>

Iegūsim šīs pogas atsauci mainīgajā:

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

Pievienosim pogai notikuma apstrādātāju, izmantojot bulta funkciju:

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

Šeit mūs sagaida pārsteigums: this bulta funkcijā norādīs nevis uz elementu, kurā notika notikums.

Apskatīsim, ko ar to var darīt.

Pirmais risinājums

Var atteikties no this izmantošanas un izmantot mainīgo, kurā saglabāta atsauce uz elementu:

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

Otrais risinājums

Var iegūt elementu, kuram piesaistīts notikums, caur event.target:

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

Trešais risinājums

Var atteikties no bulta funkcijas un izmantot parasto funkciju:

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