Gubitak konteksta u JavaScript-u

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

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

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

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

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

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

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

"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.

Recimo da sada u jednoj i u drugoj funkciji ispisujemo value input polja. Odredite, šta će se ispisati u linijama koda, označenim komentarima:

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