Perte de contexte en JavaScript

Supposons que nous ayons une fonction dans une fonction. Appelons la fonction externe parent, et la fonction interne - child :

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

D'après les leçons précédentes, vous savez que si vous définissez une variable dans la fonction externe, elle sera accessible dans la fonction interne :

function parent() {
	let str = 'abcde';
	
	function child() {
		console.log(str); // affichera 'abcde'
	}
	child(); // appelons la fonction interne
}

parent(); // appelons la fonction externe

Il y a cependant une nuance : la fonction interne a accès à toutes les variables de la fonction externe, mais n'a pas accès à this. C'est-à-dire : si la fonction externe est liée à un élément DOM, alors this dans celle-ci pointera vers cet élément, mais this de la fonction interne - ne le fera pas !

Sur quoi va alors pointer this de la fonction interne ? Réponse : il sera égal à undefined (en mode strict), car la fonction n'est liée à rien.

Vérifions cela en pratique. Supposons que nous ayons un input :

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

Lions à cet input la fonction parent, qui sera appelée lors de la perte de focus de l'input :

"use strict";

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

// Sera appelée lors de la perte de focus :
function parent() {
	// il y aura du code ici
	
	function child() {
		// il y aura du code ici
	}
	child(); // appelons la fonction enfant
}

Affichons le contenu de this dans la console à deux endroits : à l'intérieur de la fonction parent et à l'intérieur de la fonction child :

"use strict";

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

function parent() {
	console.log(this); // affichera la référence vers notre input
	
	function child() {
		console.log(this); // affichera undefined
	}
	child();
}

Lancez ce code, provoquez la perte de focus de l'input et regardez la console - vous verrez que le premier console.log affichera dans la console la référence vers notre input, et le second - simplement undefined. Une telle situation, où this de manière inattendue pour nous ne pointe pas vers ce dont nous avons besoin, est appelée perte de contexte.

Supposons maintenant que dans une et dans l'autre fonction nous affichions value de l'input. Déterminez ce qui sera affiché dans les lignes de code, marquées par des commentaires :

"use strict";

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

function parent() {
	console.log(this.value); // qu'est-ce que cela affichera ?
	
	function child() {
		console.log(this.value); // qu'est-ce que cela affichera ?
	}
	child();
}