Humbja e Kontekstit në JavaScript

Le të themi se kemi një funksion brenda një funksioni. Le ta quajmë funksionin e jashtëm parent, ndërsa atë të brendshëm - child:

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

Nga mësimet e mëparshme ju e dini se nëse caktoni ndonjë variabël në funksionin e jashtëm - ajo do të jetë e disponueshme në atë të brendshëm:

function parent() {
	let str = 'abcde';
	
	function child() {
		console.log(str); // do të shfaqë 'abcde'
	}
	child(); // therrasim funksionin e brendshëm
}

parent(); // therrasim funksionin e jashtëm

Megjithatë, ka një nuancë: funksioni i brendshëm ka qasje në të gjitha variablat e jashtme, por nuk ka qasje në this. Kjo do të thotë: nëse funksioni i jashtëm është i lidhur me një element DOM, atëherë this në të do të tregojë për atë element, por this i funksionit të brendshëm - nuk do!

Për çfarë do të tregojë atëherë this i funksionit të brendshëm? Përgjigja: ai do të jetë i barabartë me undefined (në mënyrën strikte), pasi funksioni nuk është i lidhur me asgjë.

Le ta verifikojmë në praktikë. Le të themi se kemi dhënë një input:

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

Le ta lidhim këtë input me funksionin parent, i cili do të thirret kur inputi humb fokusin:

"use strict";

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

// Do të thirret kur humbet fokusi:
function parent() {
	// këtu do të ketë ndonjë kod
	
	function child() {
		// këtu do të ketë ndonjë kod
	}
	child(); // therrasim funksionin fëmijë
}

Le të shfaqim përmbajtjen e this në konsol në dy vende: brenda funksionit parent dhe brenda funksionit child:

"use strict";

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

function parent() {
	console.log(this); // do të shfaqë lidhjen për input-in tonë
	
	function child() {
		console.log(this); // do të shfaqë undefined
	}
	child();
}

Ekzekutoni këtë kod, humbni fokusin e input-it dhe shikoni në konsol - do të shihni se console.log i parë do të shfaqë në konsol lidhjen për input-in tonë, ndërsa i dyti - thjesht undefined. Një situatë e tillë, kur this në mënyrë të papritur për ne nuk tregon për atë që na duhet, quhet humbje e kontekstit.

Le të themi tani që në një dhe në funksionin tjetër ne do të shfaqim value të input-it. Përcaktoni, çfarë do të shfaqet në rreshtat e kodit, të shënuar me komente:

"use strict";

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

function parent() {
	console.log(this.value); // çfarë do të shfaqë?
	
	function child() {
		console.log(this.value); // çfarë do të shfaqë?
	}
	child();
}