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:

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

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

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

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

javascriptfunction 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:

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

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

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

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