Lidhja e kontekstit përmes metodës call në JavaScript

Pra, kemi kuptuar se si funksionon në të vërtetë this. Tani le të shqyrtojmë metodat që na lejojnë të caktojmë forcërisht në çfarë konteksti thirret një funksion (dmth të themi forcërisht, me çfarë barazohet this).

Metoda e parë që do të shqyrtojmë quhet call. Le të shohim se si funksionon me një shembull. Le të themi se kemi një input:

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

Le të marrim një referencë për këtë input dhe ta ruajmë atë në variablin elem:

let elem = document.querySelector('#elem');

Tani le të krijojmë funksionin func, brenda të cilit do të shfaqim this.value:

function func() {
	console.log(this.value);
}

Për momentin funksioni ynë nuk e di se çfarë i referohet this. Po, sikur ta lidhim atë përmes addEventListener, atëherë do të dinte. Por ne nuk do ta bëjmë këtë. Në vend të kësaj, ne thjesht do ta thërrasim funksionin tonë, duke i thënë se this duhet të jetë i barabartë me elem.

Kjo bëhet kështu: func.call(elem). Ky kod është ekuivalent me thirrjen e thjeshtë të funksionit func kështu: func(), vetëm me kushtin që this të jetë i barabartë me elem.

Pra, sintaksa e metodës call është: funksion.call(objekt). Le të mbledhim gjithçka së bashku:

let elem = document.querySelector('#elem');

function func() {
	console.log(this.value); // do të shfaqë vlerën e inputit
}
func.call(elem);

Është dhënë funksioni:

function func() {
	console.log(this.value);
}

Janë dhënë tre inpute:

<input id="elem1" value="text1">
<input id="elem2" value="text2">
<input id="elem3" value="text3">

Duke përdorur metodën call dhe funksionin func shfaqni në ekran value të secilit prej inputeve.