Kesalahan this dalam Penangan Panah JavaScript

Akhir-akhir ini menjadi mode untuk menerapkan fungsi panah di mana-mana sebagai pengganti fungsi biasa. Namun, fungsi-fungsi ini memiliki kelemahan - mereka tidak mempertahankan this. Mari kita lihat masalah apa yang bisa dihadapi karena hal ini.

Misalkan kita memiliki tombol:

<button>teks</button>

Dapatkan referensi ke tombol ini ke dalam variabel:

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

Mari pasang penangan peristiwa pada tombol, dengan menggunakan fungsi panah:

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

Di sinilah kita mendapatkan kejutan: this dalam fungsi panah tidak akan mengacu pada elemen tempat peristiwa terjadi.

Mari kita lihat apa yang dapat dilakukan tentang ini.

Solusi pertama

Anda dapat berhenti menggunakan this dan menggunakan variabel yang terikat dengan peristiwa:

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

Solusi kedua

Anda dapat mendapatkan elemen yang terikat dengan peristiwa melalui event.target:

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

Solusi ketiga

Anda dapat berhenti menggunakan fungsi panah dan menggunakan fungsi biasa:

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