Verlies van context in JavaScript

Stel we hebben een functie in een functie. Laten we de buitenste functie <parent noemen, en de binnenste - <child:

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

Uit eerdere lessen weet je dat als je een variabele in de buitenste functie definieert - deze toegankelijk zal zijn in de binnenste:

function parent() {
	let str = 'abcde';
	
	function child() {
		console.log(str); // geeft 'abcde' weer
	}
	child(); // roept de binnenste functie aan
}

parent(); // roept de buitenste functie aan

Er is echter een nuance: de binnenste functie heeft toegang tot alle variabelen van de buitenste, maar heeft geen toegang tot <this. Dat wil zeggen: als de buitenste functie aan een DOM-element is gebonden, dan zal <this erin verwijzen naar dat element, maar <this van de binnenste functie - niet!

Waar zal <this van de binnenste functie dan naar verwijzen? Antwoord: het zal gelijk zijn aan <undefined (in de strikte modus), omdat de functie nergens aan is gebonden.

Laten we dit in de praktijk testen. Stel we hebben een input:

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

Laten we aan deze input de functie <parent binden, die wordt aangeroepen wanneer de input de focus verliest:

"use strict";

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

// Wordt aangeroepen bij verlies van focus:
function parent() {
	// hier komt code
	
	function child() {
		// hier komt code
	}
	child(); // roept de kindfunctie aan
}

Laten we de inhoud van <this naar de console loggen op twee plaatsen: binnen de functie <parent en binnen de functie <child:

"use strict";

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

function parent() {
	console.log(this); // geeft een verwijzing naar onze input weer
	
	function child() {
		console.log(this); // geeft undefined weer
	}
	child();
}

Voer deze code uit, laat de input de focus verliezen en kijk in de console - je zult zien dat de eerste <console.log in de console een verwijzing naar onze input weergeeft, en de tweede - gewoon <undefined. Een dergelijke situatie, waarin <this op een voor ons onverwachte manier niet verwijst naar wat we nodig hebben, wordt <verlies van context genoemd.

Stel dat we nu in zowel de eerste als de tweede functie de <value van de input weergeven. Bepaal wat er wordt weergegeven in de regels code, gemarkeerd met commentaar:

"use strict";

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

function parent() {
	console.log(this.value); // wat wordt er weergegeven?
	
	function child() {
		console.log(this.value); // wat wordt er weergegeven?
	}
	child();
}