Ralat this dalam Pengendali Anak Panah JavaScript

Kebelakangan ini, menjadi trend untuk menggunakan fungsi anak panah di mana-mana sahaja menggantikan fungsi biasa. Walau bagaimanapun, fungsi ini mempunyai kelemahan - mereka tidak mengekalkan this. Mari kita lihat masalah yang boleh kita hadapi disebabkan oleh ini.

Katakan kita mempunyai butang:

<button>teks</button>

Dapatkan rujukan kepada butang ini dalam pembolehubah:

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

Lampirkan pengendali peristiwa pada butang, dengan menggunakan fungsi anak panah:

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

Di sinilah kita akan dikejutkan: this dalam fungsi anak panah tidak akan merujuk kepada elemen di mana peristiwa itu berlaku.

Mari kita lihat apa yang boleh dilakukan mengenainya.

Penyelesaian pertama

Anda boleh berhenti menggunakan this dan menggunakan pembolehubah yang mana peristiwa itu diikat:

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

Penyelesaian kedua

Anda boleh mendapatkan elemen yang kepadanya peristiwa diikat melalui event.target:

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

Penyelesaian ketiga

Anda boleh berhenti menggunakan fungsi anak panah dan menggunakan fungsi biasa:

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