JavaScriptda o'q funktsiyasi bilan bog'langan this xatosi

So'nggi paytlarda hamma joyda oddiy funktsiyalar o'rniga o'q funktsiyalarini qo'llash modaga aylandi. Biroq, bu funktsiyalar hiyla-nayrangga ega - ular this ni saqlamaydi. Keling, buning sabab bo'lishi mumkin bo'lgan muammoni ko'rib chiqaylik.

Faraz qilaylik, bizda tugma bor:

<button>matn</button>

Ushbu tugmaga havolani o'zgaruvchiga olaylik:

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

Keling, tugmaga o'q funktsiyasidan foydalanib, hodisa qayta ishlovchisini qo'shamiz:

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

Aynan shu yerda bizni kutilmagan sovg'ana kutadi: this o'q funktsiyasida hodisa yuz bergan elementga tegishli bo'lmaydi.

Keling, bu bilan nima qilish mumkinligini ko'rib chiqaylik.

Birinchi yechim

this dan foydalanishdan voz kechish mumkin va hodisa bog'langan o'zgaruvchidan foydalanish mumkin:

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

Ikkinchi yechim

Hodisa bog'langan elementni event.target orqali olish mumkin:

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

Uchinchi yechim

O'q funktsiyasidan voz kechish mumkin va oddiy funktsiyadan foydalanish mumkin:

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