JavaScript-da wagtlayjylar we konteksti ýitirmek

Wagtlayjylary ýerine ýetirijilerde ulananymyzda, konteksti ýitirmek meselesi bizi gözleýär. Mysal üçin göreliň.

Bizde bir input bolsun:

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

Bu inputyň üstüne basylanynda anonim funksiýa işlesin we şol funksiýanyň içinde her sekuntda bir zat konsola çykaryan wagtlayjy işlesin:

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

elem.addEventListener('click', function() {
	setInterval(function() {
		console.log('!!!'); // bir zat konsola çykaryň
	}, 1000);
});

Häzirçe hemme zat dogry işleýär. Emma indi biz inputyň value bahasyny konsola çykarmak islesek, bizi gözleýän syrpyn taparys: konsola undefined çykarylýar:

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

Mesele şonda, bizde funksiýa içinde funksiýa bar: daşarky anonim funksiýa klik bilen çagyrylýar, we içerki anonim funksiýa wagtlayjy tarapyndan çagyrylýar. Daşarky funksiýada this inputy görkezýär, ýöne içerki funksiýada - görkezmeýär. Konteksti ýitirmek ýüze çykýar.

Näme üçin konsola ýalňyşlyk däl-de, undefined çykarylýar, öňki sapaklardaky ýaly? Sebäbi setInterval arkaly çagyrylýan funksiýanyň içindäki this, window obyektine görkezýär.

Bu ýagdaýda, biz window obyektiniň value aýratynlygyny okamak isleýäris, şeýle: window.value, ýöne onuň içinde şeýle aýratynlyk ýok, şonuň üçinem undefined alynýar (ýalňyşlyk däl).

Meseläni self üýtgeýjisini girizip çözeliň:

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

Mysal üçin bu kod berlen:

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

Kody ýazan, düwmä basylanynda, onuň bahasynyň her sekuntda 1 artmagyny isläpdir. Ýöne, düwmä basylanynda hiç zat bolmaýar. Kody ýazanyň ýalňyşlygyny düzüň. Kody ýazana düşündiriş berýän tekst ýazyň, oňa näme üçin şeýle ýalňyşlyk ýüze çykandygyny düşündiriň.