Gubitak konteksta u JavaScript-u

Recimo da imamo funkciju unutar funkcije. Hajde da spoljašnju funkciju nazovemo parent, a unutrašnju - child:

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

Iz prethodnih lekcija znate da će, ako postavite bilo koju promenljivu u spoljašnjoj funkciji - ona biti dostupna unutrašnjoj:

javascriptfunction parent() {
  let str = 'abcde';
  
  function child() {
    console.log(str); // ispisaće 'abcde'
  }
  child(); // pozivamo unutrašnju funkciju
}

parent(); // pozivamo spoljašnju funkciju

Međutim, postoji nijansa: unutrašnja funkcija ima pristup svim promenljivim spoljašnje, ali ne ima pristup this. To znači: ako je spoljašnja funkcija vezana za neki DOM element, onda će this u njoj pokazivati na taj element, ali this unutrašnje funkcije - neće!

A na šta će onda pokazivati this unutrašnje funkcije? Odgovor: biće jednak undefined (u strogom režimu), jer funkcija nije vezana ni za šta.

Hajde da proverimo u praksi. Recimo da imamo input polje:

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

Povežimo za ovo input polje funkciju parent, koja će se pozivati kada input polje izgubi fokus:

javascript"use strict";

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

// Pozvaće se pri gubitku fokusa:
function parent() {
  // ovde će biti neki kod
  
  function child() {
    // ovde će biti neki kod
  }
  child(); // pozivamo child funkciju
}

Hajde da ispišemo sadržaj this u konzolu na dva mesta: unutar funkcije parent i unutar funkcije child:

javascript"use strict";

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

function parent() {
  console.log(this); // ispisaće referencu na naše input polje
  
  function child() {
    console.log(this); // ispisaće undefined
  }
  child();
}

Pokrenite ovaj kod, izgubite fokus input polja i pogledajte u konzolu - videćete da prvi console.log ispisuje u konzolu referencu na naše input polje, a drugi - prosto undefined. Ovakva situacija, kada this na za nas neočekivan način ne pokazuje na ono što nam je potrebno, naziva se gubitak konteksta.

javascript"use strict";

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

function parent() {
  console.log(this.value); // šta će ispisati?
  
  function child() {
    console.log(this.value); // šta će ispisati?
  }
  child();
}