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:

html<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:

javascriptlet 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:

javascriptelem.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ň:

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

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

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

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