Tabt kontekst i JavaScript

Lad os sige, at vi har en funktion i en funktion. Lad os kalde den ydre funktion for parent, og den indre - child:

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

Fra tidligere lektioner ved du, at hvis du angiver en variabel i den ydre funktion - vil den være tilgængelig i den indre:

function parent() {
	let str = 'abcde';
	
	function child() {
		console.log(str); // vil udskrive 'abcde'
	}
	child(); // kalder den indre funktion
}

parent(); // kalder den ydre funktion

Der er dog en nuance: den indre funktion har adgang til alle variabler i den ydre, men har ikke adgang til this. Det vil sige: hvis den ydre funktion er bundet til et DOM-element, vil this i den pege på dette element, men this i den indre funktion - vil ikke!

Hvad vil this så pege på i den indre funktion? Svar: den vil være lig med undefined (i strikt tilstand), da funktionen ikke er bundet til noget.

Lad os teste dette i praksis. Lad os sige, at vi har et inputfelt:

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

Lad os binde funktionen parent til dette inputfelt, som vil blive kaldt, når inputfeltet mister fokus:

"use strict";

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

// Kaldes ved tab af fokus:
function parent() {
	// der vil være noget kode her
	
	function child() {
		// der vil være noget kode her
	}
	child(); // kalder den underordnede funktion
}

Lad os udskrive indholdet af this i konsollen på to steder: inde i funktionen parent og inde i funktionen child:

"use strict";

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

function parent() {
	console.log(this); // vil udskrive en reference til vores inputfelt
	
	function child() {
		console.log(this); // vil udskrive undefined
	}
	child();
}

Kør denne kode, lad inputfeltet miste fokus og kig i konsollen - du vil se, at den første console.log vil udskrive en reference til vores inputfelt, og den anden - blot undefined. En sådan situation, hvor this på en uventet måde ikke peger på det, vi har brug for, kaldes tabt kontekst.

Lad os nu sige, at vi i både den ene og den anden funktion vil udskrive inputfeltets value. Bestem, hvad der vil blive udskrevet i kodelinjerne markeret med kommentarer:

"use strict";

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

function parent() {
	console.log(this.value); // hvad udskrives der?
	
	function child() {
		console.log(this.value); // hvad udskrives der?
	}
	child();
}