Таймерҳо ва гум шудани контекст дар JavaScript

Ҳангоми истифодаи таймерҳо дар коргузориҳои воқеаҳо, мушкилоти гум шудани контекст мониторинги моро интизорӣ доранд. Биёед намунаеро бубинем.

Бигзор мо як вурудӣ дошта бошем:

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

Бигзор бо клик кардан бар ин вурудӣ, як функсияи номнок кор кунад ва дар дохили ин функсия таймер оғоз шавад, ки ҳар сония чизеро ба консоли чоп кунад:

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

elem.addEventListener('click', function() {
	setInterval(function() {
		console.log('!!!'); // чизе ба консоли чоп мекунем
	}, 1000);
});

То ҳол ҳама чиз дуруст кор мекунад. Вале акнун бигзор мо мехоҳем, ки дар консоли value -и вуруди худро чоп кунем - мо бо тааҷҷуб рӯ ба рӯ мешавем: дар консоли undefined чоп хоҳад шуд:

elem.addEventListener('click', function() {
	setInterval(function() {
		console.log(this.value); // undefined чоп хоҳад шуд
	}, 1000);
});

Ҳама чиз дар он аст, ки мо функсияе дар функсия пайдо мекунем: функсияи номноки берунае мавҷуд аст, ки бо клик фарохонӣ мешавад ва функсияи номноки дохилае, ки таймер онро меоғозад. Дар функсияи берунӣ this ба вурудӣ ишора мекунад, вале дар дохилӣ - не. Гум шудани контекст ба амал меояд.

Чаро undefined чоп мешавад, ва на хатогие дар консол меафтад, монанди он чи ки дар дарсҳои қаблӣ буд? Зеро this дар дохили функсияе, ки тавассути setInterval фарохонӣ мешавад, ба window ишора мекунад.

Ин маънои онро дорад, ки мо кӯшиш мекунем хосияти value-ро аз ҷисми window хонем, ба ин шакл: window.value, вале чунин хосиятте дар он нест, ва мо undefined мегирем (на хатогиро).

Мушкилиро бо ворид кардани self ислоҳ кунем:

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

Бигзор чунин рамз дода шавад:

<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);
});

Муаллифи рамз мехост, то ки бо пахш кардани тугма, қимати ин тугма ҳар сония бар 1 афзоиш ёбад. Аммо, бо пахш кардани тугма ҳеҷ чиз ба амал намеояд. Хатои муаллифи рамзро ислоҳ кунед. Матнеро нависед, ки дар он шумо ба муаллифи рамз шарҳ медиҳед, чаро хатои ӯ ба амал омад.