Timere og tap av kontekst i JavaScript

Ved bruk av timere i hendelseshåndterere venter det problemer med tap av kontekst. La oss se på et eksempel.

La oss si at vi har et input-felt:

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

La oss si at ved klikk på dette input-feltet utløses en anonym funksjon, og inne i denne funksjonen starter en timer som hvert sekund skriver ut noe i konsollen:

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

elem.addEventListener('click', function() {
  setInterval(function() {
    console.log('!!!'); // skriver ut noe i konsollen
  }, 1000);
});

Så langt fungerer alt korrekt. Men la oss nå si at vi ønsker å skrive ut value fra vårt input-felt til konsollen - da venter det en overraskelse: i konsollen vil det stå undefined:

javascriptelem.addEventListener('click', function() {
  setInterval(function() {
    console.log(this.value); // vil skrive ut undefined
  }, 1000);
});

Hele poenget er at vi ender opp med en funksjon innenfor en funksjon: det er en ytre anonym funksjon, som kalles ved klikk, og en indre anonym funksjon, som timeren starter. I den ytre funksjonen peker this på input-feltet, men i den indre - ikke. Det forekommer et tap av kontekst.

Hvorfor skrives det ut undefined, og ikke kommer det en feilmelding i konsollen, som det gjorde i forrige leksjoner? Fordi this inni funksjonen som kalles via setInterval, peker på window.

Det betyr at vi prøver å lese egenskapen value fra objektet window, slik: window.value, og en slik egenskap finnes ikke i den, og vi får undefined (ikke en feil).

La oss rette problemet ved å innføre self:

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