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 чиқади, аввалги дарслардаги каби хato чиқмайди? Чунки setInterval орқали чақириладиган функция ичидаги this, window га ишора қилади.

Бу дегани, биз window объектидан value хусусиятини ўқишга ҳаракат қиляпмиз, мана шундай: window.value, лекин унда бундай хусусият йўқ, ва биз undefined оламиз (хato эмас).

Муаммони 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 га ўсишини истаган. Аммо, тугмага босилганда ҳеч нарса бўлмайди. Код муаллифининг хatosини тузатинг. Сиз код муаллифига унинг хatоси нима сабабдан юз берганини тушунтириб берадиган матн ёзинг.