JavaScript-те стрелкалық обработчиктегі this қатесі

Соңғы уақытта барлық жерде қарапайым функциялардың орнына стрелкалық функцияларды қолдану сәнді болды. Бірақ бұл функциялардың қулығы бар - олар this-ты сақтамайды. Осының салдарынан қандай мәселеге тап болуымыз мүмкін екенін көрейік.

Бізде түйме болсын:

<button>мәтін</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);
});