JavaScript-daky ok çyzykly işleýjiniň this ýalňyşlygy

Soňky wagtlar her ýerde adaty funksiýalaryň ornuna ok çyzykly funksiýalary ulanylmak moda boldy. Emma bu funksiýalaryň bir aýawly tarapy bar - olar this-i saklamaz. Gelňi, bu sebäpli ýüze çykyp bilýän meseläni göreliň.

Bizde bir düwme bolsun:

<button>text</button>

Bu düwmäniň salgysyny üýtgeýjide alalyň:

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

Düwmäni ok çyzykly funksiýany ulanyp, waka işleýjisini birikdireliň:

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

Şu ýerde bizi gözleýän syn: ok çyzykly funksiýadaky this, wakanyň bolup geçen elementine degişli bolmaz.

Gelňi, bu bilen näme edip boljakdygyna göz aýlalyň.

Birineji çözgüt

this ulanylmagy bes edip, wakanyň birikdirilen üýtgeýjisinden peýdalanyp bolar:

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

Ikinji çözgüt

Wakanyň birikdirilen elementini event.target arkaly alyp bolar:

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

Üçünji çözgüt

Ok çyzykly funksiýany bes edip, adaty funksiýany ulanyp bolar:

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