Kupotea Muktadha katika JavaScript

Hebu tuchukue kuwa tuna kazi ndani ya kazi. Hebu tuiite kazi ya nje parent, na ya ndani - child:

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

Kutoka masomo yaliyopita unajua kuwa ikiwa utaweka kutofautisha yoyote katika kazi ya nje - itapatikana katika kazi ya ndani:

function parent() {
	let str = 'abcde';
	
	function child() {
		console.log(str); // itatoa 'abcde'
	}
	child(); // tunaita kazi ya ndani
}

parent(); // tunaita kazi ya nje

Hata hivyo, kuna undani: kazi ya ndani ina ufikiaji wa kutofautisha zote za nje, lakini haina ufikiaji wa this. Hii inamaana: ikiwa kazi ya nje imeshikamana na kipengele cha DOM, basi this ndani yake itaelekeza kwenye kipengele hicho, lakini this ya kazi ya ndani -haitafanya hivyo!

Basi this ya kazi ya ndani itaelekeza wapi? Jibu: itakuwa sawa na undefined (katika hali mkali), kwa sababu kazi haishikamani na chochote.

Hebu tuangalie kwa vitendo. Hebu tuchukue tuna kipengele cha ingizo:

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

Tushikamishe kipengele hiki cha ingizo kazi parent, ambayo itaitwa pale ingizo linapopoteza umakini:

"use strict";

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

// Itaitwa pale kipoteza umakini:
function parent() {
	// kutakuwa na baadhi ya kificho hapa
	
	function child() {
		// kutakuwa na baadhi ya kificho hapa
	}
	child(); // tunaita kazi ya mtoto
}

Hebu tuonyeshe yaliyomo this kwenye konsoli katika sehemu mbili: ndani ya kazi parent na ndani ya kazi child:

"use strict";

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

function parent() {
	console.log(this); // itatoa kiungo kwenye kipengele chetu cha ingizo
	
	function child() {
		console.log(this); // itatoa undefined
	}
	child();
}

Washa kificho hiki, poteza umakini wa kipengele cha ingizo na uangalie kwenye konsoli - utaona kuwa kwanza console.log itatoa kwenye konsoli kiungo kwenye kipengele chetu cha ingizo, na ya pili - undefined tu. Hali kama hii, ambapo this kwa njia isiyotarajiwa haelekezi kwenye kile tunachohitaji, inaitwa kupotea muktadha.

Hebu sasa kwenye kazi ya kwanza na ya pili tuonyeshe value ya kipengele cha ingizo. Amua, nini kitaonyeshwa kwenye mistari ya kificho, iliyowekwa alama kwa maoni:

"use strict";

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

function parent() {
	console.log(this.value); // kitatoa nini?
	
	function child() {
		console.log(this.value); // kitatoa nini?
	}
	child();
}