JavaScript'те this жебегинин катасы

Акыркы мезгилде бардык жерде кадимки функциялардын ордуна жебе функцияларын колдонуу мода болуп калды. Бирок, бул функциялардын тамашы бар - алар this сактай алышпайт. Келгиле, бул себептен кандай маселеге тушушу мүмкүн экенин көрөлү.

Анда бизде баскыч болсун:

<button>text</button>

Ошол баскычка шилтеме алып, өзгөрмөгө коёлу:

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

Баскычка жебе функциясын колдонуп, окуя иштеткичин орнотойлу:

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

Мына бул жерде бизди күтүлбөгөн нерсе күтөт: жебе функциясындагы this окуя болуп жаткан элементке тиешелүү болбой калат.

Келгиле, буга эмне кылууга болорун карап чыгалы.

Биринчи чечим

this колдонуудан баш тартып, окуя байланган өзгөрмөгө жүгүрсө болот:

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

Экинчи чечим

Окуя байланган элементти event.target аркылуу алууга болот:

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

Үчүнчү чечим

Жебе функциясынан баш тартып, кадимки функцияны колдонсо болот:

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