Vipima na Kupoteza Muktadha katika JavaScript

Wakati wa kutumia vipima katika vichakataji matukio tunakabiliwa na matatizo ya kupoteza muktadha. Hebu tuangalie kwa mfano.

Tuchukulie tuna kiingizio:

<input id="elem" value="text">

Tuchukulie kubofya kiingizio hiki kitafanya kazi anonimu na ndani ya kitendakazi hicho kianzisha kiima, kila sekunda kinachotoa kitu kwenye koni:

let elem = document.querySelector('#elem');

elem.addEventListener('click', function() {
	setInterval(function() {
		console.log('!!!'); // tunatoa kitu kwenye koni
	}, 1000);
});

Kwa sasa kila kitu kinafanya kazi sawa. Lakini sasa tuchukulie tunataka kuonyesha kwenye koni value ya kiingizio chetu - tunakabiliwa na mshangao: kwenye koni kutaonyeshwa undefined:

elem.addEventListener('click', function() {
	setInterval(function() {
		console.log(this.value); // itaonyesha undefined
	}, 1000);
});

Shida yote ni kwamba tunapata kitendakazi ndani ya kitendakazi: kuna kitendakazi cha nje cha anonimu, kinachoitwa kwa kubofya na cha ndani cha anonimu, ambacho kinaanzishwa na kiima. Katika kitendakazi cha nje this inaelekeza kwenye kiingizio, lakini kwa cha ndani - haifanyi. Kuna kupoteza muktadha.

Kwa nini inaonyesha undefined, na haitupi makosa kwenye koni, kama ilivyokuwa katika masomo yaliyopita? Kwa sababu this ndani ya kitendakazi, kinachoitwa kupitia setInterval, inaelekeza kwenye window.

Hii inamaanisha kuwa tunajaribu kusoma sifa value ya kitu window, kama hivi: window.value, na sifa kama hiyo haipo ndani yake, na tunapata undefined (sio makosa).

Turekebishe tatizo kwa kuanzisha self:

elem.addEventListener('click', function() {
	let self = this;
	
	setInterval(function() {
		console.log(self.value);
	}, 1000);
});

Tuchukulie kuna msimbo kama huu:

<input type="button" id="elem" value="1">

let elem = document.querySelector('#elem');

elem.addEventListener('click', function() {
	setInterval(function() {
		this.value = Number(elem.value) + 1;
	}, 1000);
});

Mwandishi wa msimbo alitaka, ili kubonyeza kitufe, thamani ya kitufe hicho kila sekunda iongezeke kwa 1. Hata hivyo, kubonyeza kitufe hakuna chochote kinachotokea. Rekebisha makosa ya mwandishi wa msimbo. Andika maandishi, ambayo wewe utatoa maelezo kwa mwandishi wa msimbo, kwa nini yalitokea makosa yake.