Konteksti kaotamine JavaScriptis

Oletame, et meil on funktsioon funktsioonis. Nimetame välisfunktsiooni parent-iks ja sisefunktsiooni child-iks:

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

Eelmistest õppetükkidest teate, et kui määrata mingi muutuja välisfunktsioonis - on see kättesaadav sisefunktsioonis:

function parent() {
	let str = 'abcde';
	
	function child() {
		console.log(str); // väljastab 'abcde'
	}
	child(); // kutsume sisefunktsiooni
}

parent(); // kutsume välisfunktsiooni

Siiski on nüanss: sisefunktsioonil on juurdepääs kõikidele välisfunktsiooni muutujatele, kuid tal ei ole juurdepääsu this-ile. See tähendab: kui välisfunktsioon on seotud mõne DOM elemendiga, siis this selles viitab sellele elemendile, kuid this sisefunktsioonis ei viita!

Millele siis this sisefunktsioonis viitab? Vastus: see on võrdne undefined-ga (ranget režiimi), kuna funktsioon pole millegagi seotud.

Kontrollime seda praktikas. Oletame, et meil on antud input:

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

Seome selle inputiga funktsiooni parent, mida kutsutakse välja inputi fookuse kaotamisel:

"use strict";

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

// Kutsutakse välja fookuse kaotamisel:
function parent() {
	// siin on mingi kood
	
	function child() {
		// siin on mingi kood
	}
	child(); // kutsume lapsefunktsiooni
}

Väljastame this sisu konsooli kahes kohas: funktsiooni parent sees ja funktsiooni child sees:

"use strict";

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

function parent() {
	console.log(this); // väljastab viite meie inputile
	
	function child() {
		console.log(this); // väljastab undefined
	}
	child();
}

Käivitage see kood, kaotage inputi fookus ja vaadake konsooli - näete, et esimene console.log väljastab konsooli viite meie inputile, ja teine - lihtsalt undefined. Sellist olukorda, kus this ootamatult viitab mitte sellele, mida me vajame, nimetatakse konteksti kaotamiseks.

Oletame nüüd, et nii ühes kui teises funktsioonis me väljastame inputi value. Määrake, mida väljastatakse koodiridadel, mis on märgitud kommentaaridega:

"use strict";

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

function parent() {
	console.log(this.value); // mida väljastab?
	
	function child() {
		console.log(this.value); // mida väljastab?
	}
	child();
}