Förlust av kontext i JavaScript

Låt oss säga att vi har en funktion inuti en funktion. Låt oss kalla den yttre funktionen parent och den inre funktionen child:

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

Från tidigare lektioner vet du att om du sätter en variabel i den yttre funktionen kommer den att vara tillgänglig i den inre funktionen:

function parent() {
	let str = 'abcde';
	
	function child() {
		console.log(str); // skriver ut 'abcde'
	}
	child(); // anropar den inre funktionen
}

parent(); // anropar den yttre funktionen

Det finns dock en nyans: den inre funktionen har åtkomst till alla variabler i den yttre, men har inte åtkomst till this. Det vill säga: om den yttre funktionen är bunden till ett DOM-element, kommer this i den att peka på det elementet, men this i den inre funktionen kommer inte att göra det!

Vad kommer då this i den inre funktionen att peka på? Svaret: det kommer att vara undefined (i strikt läge), eftersom funktionen inte är bunden till någonting.

Låt oss testa detta i praktiken. Låt oss säga att vi har en input:

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

Låt oss binda funktionen parent till denna input, som ska anropas när input förlorar fokus:

"use strict";

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

// Anropas vid förlust av fokus:
function parent() {
	// någon kod här
	
	function child() {
		// någon kod här
	}
	child(); // anropar barnfunktionen
}

Låt oss skriva ut innehållet i this till konsolen på två ställen: inuti funktionen parent och inuti funktionen child:

"use strict";

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

function parent() {
	console.log(this); // skriver ut en referens till vår input
	
	function child() {
		console.log(this); // skriver ut undefined
	}
	child();
}

Kör denna kod, låt input förlora fokus och titta i konsolen - du kommer att se att den första console.log skriver ut en referens till vår input, och den andra - bara undefined. En sådan situation, där this på ett oväntat sätt inte pekar på det vi behöver, kallas förlust av kontext.

Låt oss nu i både den första och den andra funktionen skriva ut value från input. Bestäm vad som kommer att skrivas ut på de kodrader som är markerade med kommentarer:

"use strict";

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

function parent() {
	console.log(this.value); // vad skrivs ut?
	
	function child() {
		console.log(this.value); // vad skrivs ut?
	}
	child();
}