Verlust des Kontexts in JavaScript

Nehmen wir an, wir haben eine Funktion in einer Funktion. Nennen wir die äußere Funktion parent und die innere child:

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

Aus vorherigen Lektionen wissen Sie, dass, wenn eine Variable in der äußeren Funktion gesetzt wird - sie in der inneren verfügbar sein wird:

function parent() {
	let str = 'abcde';
	
	function child() {
		console.log(str); // gibt 'abcde' aus
	}
	child(); // rufen die innere Funktion auf
}

parent(); // rufen die äußere Funktion auf

Es gibt jedoch einen Nuance: Die innere Funktion hat Zugriff auf alle Variablen der äußeren, hat aber keinen Zugriff auf this. Das heißt: Wenn die äußere Funktion an ein DOM-Element gebunden ist, dann wird this in ihr auf dieses Element zeigen, aber this der inneren Funktion - wird es nicht!

Worauf wird dann this zeigen der inneren Funktion? Antwort: Es wird gleich undefined sein (im strikten Modus), da die Funktion an nichts gebunden ist.

Lassen Sie uns das in der Praxis überprüfen. Nehmen wir an, wir haben ein Input-Feld:

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

Binden wir an dieses Input-Feld die Funktion parent, die beim Verlust des Fokus durch das Input-Feld aufgerufen wird:

"use strict";

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

// Wird beim Verlust des Fokus aufgerufen:
function parent() {
	// hier wird irgendein Code sein
	
	function child() {
		// hier wird irgendein Code sein
	}
	child(); // rufen die Kindfunktion auf
}

Lassen Sie uns den Inhalt von this an zwei Stellen in der Konsole ausgeben: innerhalb der Funktion parent und innerhalb der Funktion child:

"use strict";

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

function parent() {
	console.log(this); // gibt die Referenz auf unser Input-Feld aus
	
	function child() {
		console.log(this); // gibt undefined aus
	}
	child();
}

Starten Sie diesen Code, lassen Sie das Input-Feld den Fokus verlieren und schauen Sie in die Konsole - Sie werden sehen, dass der erste console.log in der Konsole die Referenz auf unser Input-Feld ausgibt, und der zweite - einfach undefined. Eine solche Situation, in der this auf unerwartete Weise nicht auf das zeigt, was wir brauchen, wird Verlust des Kontexts genannt.

Nehmen wir nun an, dass wir in der einen und in der anderen Funktion den value des Input-Felds ausgeben. Bestimmen Sie, was in den durch Kommentare markierten Codezeilen ausgegeben wird:

"use strict";

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

function parent() {
	console.log(this.value); // was wird ausgegeben?
	
	function child() {
		console.log(this.value); // was wird ausgegeben?
	}
	child();
}