JavaScript-de kontekstiň ýitirilmegi

Içinde funksiýa bolan funksiýamyz bar bolsun. Daşarky funksiýany parent, içerki funksiýany bolsa child diýip atlandyralyň:

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

Öňki sapaklardan bilýäňiz, daşarky funksiýada islendik üýtgeýjini kesgitlek mümkin bolsa, oňa içerki funksiýadanam girip bolýar:

function parent() {
	let str = 'abcde';
	
	function child() {
		console.log(str); // 'abcde' çap eder
	}
	child(); // içerki funksiýany çagyralyň
}

parent(); // daşarky funksiýany çagyralyň

Emma, bir nüans bar: içerki funksiýa daşarkynyň ähli üýtgeýjänlerine girip bilýär, ýöne this girip bilmeýär. Ýagny: eger daşarky funksiýa haýsydyr bir DOM elementine baglanan bolsa, onda onda this şol elemente görkezer, ýöne içerki funksiýanyň this - görkezmez!

Içerki funksiýanyň this näme görkezer? Jogaby: ol şuňa deň bolar undefined (gaty tertipte), sebäbi funksiýa hiç zat bilen baglanyşykly däl.

Amalda barlap göräýli. Bizde bir input bolsun:

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

Şu input bilen parent funksiýasyny baglalyň, oňa input fokusy ýitireninde çagyrylar:

"use strict";

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

// Fokus ýitirilende çagyrylar:
function parent() {
	// bu ýerde käbir kod bolar
	
	function child() {
		// bu ýerde käbir kod bolar
	}
	child(); // çaga funksiýany çagyralyň
}

this mazmunyny konsolde iki ýerde çap edeliň: parent funksiýasynyň içinde we child funksiýasynyň içinde:

"use strict";

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

function parent() {
	console.log(this); // biziň inputymyza çykgyt çap eder
	
	function child() {
		console.log(this); // undefined çap eder
	}
	child();
}

Bu kody işlediň, inputdan fokusa ýitiriň we konsola serediň - ilkinji console.log konsolda biziň inputymyza çykgyt çap edýändigini, ikinjisiniň bolsa diňe undefined çap edýändigini görersiňiz. this gözleýän zadymyza däl-de, biz üçin gözlenilmedik ýagdaýda başga bir zada görkezýän bu ýagdaýa kontekstiň ýitirilmegi diýilýär.

Indi bir we ikinji funksiýada biz inputyň value sanyny çap edeliň. Kesgitleň, kommentariýa belgilenen kod setirlerinde näme çap ediler:

"use strict";

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

function parent() {
	console.log(this.value); // näme çap eder?
	
	function child() {
		console.log(this.value); // näme çap eder?
	}
	child();
}