Губење на контекст во JavaScript

Нека имаме функција во функција. Ајде надворешната функција да ја наречеме parent, а внатрешната - child:

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

Од претходните лекции знаете дека ако се зададе која било променлива во надворешната функција - таа ќе биде достапна во внатрешната:

function parent() {
	let str = 'abcde';
	
	function child() {
		console.log(str); // ќе испише 'abcde'
	}
	child(); // ја повикуваме внатрешната функција
}

parent(); // ја повикуваме надворешната функција

Сепак, постои нијанса: внатрешната функција има пристап до сите променливи на надворешната, но не има пристап до this. Тоа е: ако надворешната функција е врзана за некој DOM елемент, тогаш this во неа ќе покажува кон тој елемент, но this на внатрешната функција - нема да покажува!

Кон што тогаш ќе покажува this на внатрешната функција? Одговор: тој ќе биде еднаков на undefined (во строг режим), бидејќи функцијата не е врзана за ништо.

Ајде да провериме во пракса. Нека имаме внесено поле:

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

Да ја врземе за ова внесено поле функцијата parent, која ќе се повикува при загуба на фокусот на внесеното поле:

"use strict";

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

// Ќе се повика при загуба на фокусот:
function parent() {
	// тука ќе има некој код
	
	function child() {
		// тука ќе има некој код
	}
	child(); // ја повикуваме ќерка функцијата
}

Ајде да го испечатиме содржината на this во конзола на две места: внатре во функцијата parent и внатре во функцијата child:

"use strict";

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

function parent() {
	console.log(this); // ќе испише референца до нашето внесено поле
	
	function child() {
		console.log(this); // ќе испише undefined
	}
	child();
}

Стартувајте го овој код, изгубете го фокусот на внесеното поле и погледнете во конзола - ќе видите дека првиот console.log ќе испише во конзола референца до нашето внесено поле, а вториот - само undefined. Ваква ситуација, кога this на неочекуван начин за нас не покажува кон тоа што ни е потребно, се нарекува губење на контекст.

Нека сега во едната и во втората функција ние ќе ја печатиме value на внесеното поле. Одредете, што ќе се испише во линиите код, означени со коментари:

"use strict";

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

function parent() {
	console.log(this.value); // што ќе испише?
	
	function child() {
		console.log(this.value); // што ќе испише?
	}
	child();
}