Тајмери и губење на контекст во JavaScript

При користење на тајмери во обработувачи на настани нè чекаат проблеми со губење на контекстот. Ајде да погледнеме на пример.

Нека имаме input:

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

Нека при клик на овој input се активира анонимна функција и внатре во оваа функција да се стартува тајмер, кој на секоја секунда ќе испечати нешто во конзолата:

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

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

Досега сè работи правилно. Но, нека сега сакаме да ја испечатиме во конзолата value на нашиот input - нè чека изненадување: во конзолата ќе се печати undefined:

elem.addEventListener('click', function() {
	setInterval(function() {
		console.log(this.value); // ќе се печати undefined
	}, 1000);
});

Сè се должи на тоа што добиваме функција во функција: постои надворешна анонимна функција, која се повикува при клик и внатрешна анонимна функција, која ја стартува тајмерот. Во надворешната функција this покажува кон input, но во внатрешната - не. Се јавува губење на контекстот.

Зошто се печати 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. Сепак, при клик на копчето не се случува апсолутно ништо. Исправете ја грешката на авторот на кодот. Напишете текст во кој ќе дадете објаснување до авторот на кодот, зошто се појавила неговата грешка.