JavaScript-də ox funksiyası işləyicisində this xətası

Son zamanlar hər yerdə adi funksiyalar əvəzinə ox funksiyalarından istifadə etmək dəbdə oldu. Lakin bu funksiyaların bir çətinliyi var - onlar this saxlamır. Gəlin buna görə hansı problemlə üzləşə biləcəyimizə nəzər salaq.

Tutaq ki, bizim bir düyməmiz var:

<button>mətn</button>

Gəlin bu düyməyə istinadı dəyişəndə əldə edək:

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

Gəlin düyməyə ox funksiyasından istifadə edərək hadisə işləyicisi əlavə edək:

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

Bizi elə burada sürpriz gözləyir: this ox funksiyasında hadisənin baş verdiyi elementə aid olmayacaq.

Gəlin buna nə edə biləcəyimizə baxaq.

Birinci həll

this istifadə etməkdən imtina edə bilərik və hadisənin bağlandığı dəyişəndən istifadə edə bilərik:

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

Ikinci həll

Hadisənin bağlandığı elementi event.target vasitəsilə əldə edə bilərik:

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

Üçüncü həll

Ox funksiyasından imtina edib adi funksiyadan istifadə edə bilərik:

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