Hitilafu ya this katika kishughulikizi cha mishale cha JavaScript

Hivi karibuni imekuwa mitindo kutumia kazi za mishale kila mahali badala ya kawaida. Kazi hizi, hata hivyo, zina hitilafu - hazihifadhi this. Hebu tuone ni tatizo gani linaweza kukutana kutokana na hii.

Hebu tuchukulie tuna kifungo:

<button>maandishi</button>

Tupate rejeleo la kifungo hiki kwenye kutofautisha:

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

Tuweke kishughulikizi cha tukio kwenye kifungo, tukitumia kazi ya mishale:

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

Hapa ndipo tunakumbana na kishuja: this katika kazi ya mishale haitahusu kipengele ambacho tukio limetokea.

Wacha tuone nini kinaweza kufanyika kuhusu hili.

Suluhisho la kwanza

Inawezekana kukataa matumizi ya this na kutumia kutofautisha ambacho tukio limeunganishwa:

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

Suluhisho la pili

Inawezekana kupata kipengele ambacho tukio limeunganishwa kupitia event.target:

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

Suluhisho la tatu

Inawezekana kukataa kazi ya mishale na kutumia kazi ya kawaida:

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