Verlies van konteks in JavaScript

Kom ons sê ons het 'n funksie binne 'n funksie. Kom ons noem die buitenste funksie parent, en die binnerste - child:

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

Uit vorige lesse weet jy dat as jy 'n veranderlike in die buitenste funksie definieer - dit sal toeganklik wees in die binnerste:

function parent() {
	let str = 'abcde';
	
	function child() {
		console.log(str); // sal 'abcde' uitvoer
	}
	child(); // roep die binnerste funksie aan
}

parent(); // roep die buitenste funksie aan

Daar is eger 'n nuanse: die binnerste funksie het toegang tot al die veranderlikes van die buitenste, maar het nie toegang tot this nie. Dit beteken: as die buitenste funksie aan 'n DOM-element gebind is, sal this daarin verwys na daardie element, maar this in die binnerste funksie - sal nie!

Waarop sal this dan in die binnerste funksie wys? Antwoord: dit sal gelyk wees aan undefined (in streng modus), aangesien die funksie aan niks gebind is nie.

Kom ons toets dit in die praktyk. Kom ons sê ons het 'n invoerveld:

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

Kom ons bind die funksie parent aan hierdie invoerveld, wat uitgevoer sal word wanneer die invoerveld fokus verloor:

"use strict";

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

// Sal uitgevoer word by fokusverlies:
function parent() {
	// daar sal een of ander kode wees
	
	function child() {
		// daar sal een of ander kode wees
	}
	child(); // roep die kindfunksie aan
}

Kom ons toon die inhoud van this in die konsole op twee plekke: binne die funksie parent en binne die funksie child:

"use strict";

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

function parent() {
	console.log(this); // sal 'n verwysing na ons invoerveld toon
	
	function child() {
		console.log(this); // sal undefined toon
	}
	child();
}

Laat hierdie kode loop, laat die invoerveld fokus verloor en kyk in die konsole - jy sal sien dat die eerste console.log 'n verwysing na ons invoerveld in die konsole sal toon, en die tweede - eenvoudig undefined. Sodanige situasie, wanneer this op 'n onverwagse manier nie wys na wat ons benodig nie, word genoem verlies van konteks.

Kom ons sê nou dat in beide die eerste en die tweede funksie ons die value van die invoerveld sal toon. Bepaal wat uitgevoer sal word in die kode-reëls, gemerk met kommentaar:

"use strict";

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

function parent() {
	console.log(this.value); // wat sal dit toon?
	
	function child() {
		console.log(this.value); // wat sal dit toon?
	}
	child();
}