Izguba konteksta v JavaScript

Recimo, da imamo funkcijo znotraj funkcije. Zunanjo funkcijo poimenujmo parent, notranjo pa child:

javascriptfunction parent() {
  function child() {
    
  }
}

Iz prejšnjih lekcij veste, da če nastavite katero koli spremenljivko v zunanji funkciji - bo dostopna v notranji:

javascriptfunction parent() {
  let str = 'abcde';
  
  function child() {
    console.log(str); // izpiše 'abcde'
  }
  child(); // pokličemo notranjo funkcijo
}

parent(); // pokličemo zunanjo funkcijo

Vendar obstaja odtenek: notranja funkcija ima dostop do vseh spremenljivk zunanje, vendar nima dostopa do this. To pomeni: če je zunanja funkcija vezana na nek DOM element, bo this v njej kazal na ta element, vendar this notranje funkcije - ne bo!

Na kaj bo potem kazal this notranje funkcije? Odgovor: enak bo undefined (v strogem načinu), ker funkcija ni na nič vezana.

Preverimo v praksi. Recimo, da imamo dan vnosno polje:

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

Povežimo to vnosno polje s funkcijo parent, ki se bo klicala ob izgubi fokusa vnosnega polja:

javascript"use strict";

let elem = document.querySelector('#elem');
elem.addEventListener('blur', parent);

// Pokliče se ob izgubi fokusa:
function parent() {
  // tukaj bo nekaj kode
  
  function child() {
    // tukaj bo nekaj kode
  }
  child(); // kličemo podrejeno funkcijo
}

Izpišimo vsebino this v konzolo na dveh mestih: znotraj funkcije parent in znotraj funkcije child:

javascript"use strict";

let elem = document.querySelector('#elem');
elem.addEventListener('blur', parent);

function parent() {
  console.log(this); // izpiše referenco na naše vnosno polje
  
  function child() {
    console.log(this); // izpiše undefined
  }
  child();
}

Zaženite to kodo, povzročite izgubo fokusa vnosnega polja in poglejte v konzolo - videli boste, da bo prvi console.log izpisal v konzolo referenco na naše vnosno polje, drugi pa - preprosto undefined. Takšna situacija, ko this na nepričakovan način ne kaže na tisto, kar potrebujemo, se imenuje izguba konteksta.

javascript"use strict";

let elem = document.querySelector('#elem');
elem.addEventListener('blur', parent);

function parent() {
  console.log(this.value); // kaj bo izpisalo?
  
  function child() {
    console.log(this.value); // kaj bo izpisalo?
  }
  child();
}