Konteksti sidumine meetodi call kaudu JavaScriptis

Nii, me saime aru, kuidas tegelikult töötab this. Vaatame nüüd meetodeid, mis võimaldavad sundivalt määrata, mis kontekstis funktsiooni kutsutakse (ehk sundivalt öelda, millega this võrdub).

Esimene meetod, mida me vaatame, on call. Vaatame selle toimimist läbi näite. Olgu meil väli:

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

Võtame selle välja viite ja paneme selle muutujasse elem:

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

Teeme nüüd funktsiooni func, mille sees väljastame this.value:

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

Praegu meie funktsioon ei tea, millele viitab this. Kui me seoksime selle läbi addEventListener, siis jah. Aga me ei tee seda. Selle asemel me lihtsalt kutsume oma funktsiooni, öeldes talle, et this peab võrduma elem-iga.

See tehakse nii: func.call(elem). See kood on samaväärne lihtsa funktsiooni väljakutsega func nii: func(), ainult tingimusel, et this võrdub elem.

Niisiis, meetodi call süntaks on: funktsioon.call(objekt). Paneme kõik kokku:

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

function func() {
	console.log(this.value); // väljastab välja value
}
func.call(elem);

Antud funktsioon:

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

Antud kolm välja:

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

Kasutades meetodit call ja funktsiooni func kuvake ekraanile iga välja value.