JavaScript'te Ok İşleyicisinde this Hatası

Son zamanlarda her yerde normal işlevler yerine ok işlevlerini kullanmak moda oldu. Ancak, bu işlevlerin bir tuzağı var - this'i korumazlar. Bakalım bu yüzden hangi problemle karşılaşabiliriz.

Diyelim ki bir butonumuz var:

<button>text</button>

Bu butona bir referansı bir değişkende alalım:

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

Bir ok işlevi kullanarak butona bir olay işleyicisi ekleyelim:

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

İşte bizi burada bir sürpriz bekliyor: Ok işlevi içindeki this, olayın meydana geldiği öğeye işaret etmeyecek.

Bununla ne yapabileceğimize bir bakalım.

Birinci Çözüm

this kullanmaktan vazgeçebilir ve olayın bağlı olduğu değişkeni kullanabiliriz:

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

İkinci Çözüm

Olayın bağlı olduğu öğeye event.target üzerinden ulaşabiliriz:

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

Üçüncü Çözüm

Ok işlevinden vazgeçebilir ve normal bir işlev kullanabiliriz:

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