Kontekstbinding via call-metoden i JavaScript

Så vi har gjennomgått hvordan this egentlig fungerer. La oss nå se på metoder som lar oss tvinge å spesifisere i hvilken kontekst en funksjon kalles (det vil si å tvinge å si hva this er lik).

Den første metoden vi skal gjennomgå heter call. La oss se på hvordan den fungerer med et eksempel. La oss si at vi har et input-felt:

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

La oss få en referanse til dette input-feltet og skrive den til variabelen elem:

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

La oss nå lage en funksjon func, innenfor den skal vi skrive ut this.value:

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

Foreløpig vet ikke funksjonen vår hva this refererer til. Hvis vi hadde bundet den via addEventListener, så ja. Men det skal vi ikke gjøre. I stedet vil vi bare kalle funksjonen vår, og si at this skal være lik elem.

Dette gjøres slik: func.call(elem). Denne koden er ekvivalent med et enkelt funksjonskall func slik: func(), bare med betingelsen om at this er lik elem.

Så, syntaksen til call-metoden er slik: funksjon.call(objekt). La oss sette alt sammen:

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

function func() {
	console.log(this.value); // vil skrive ut input-feltets value
}
func.call(elem);

Gitt funksjonen:

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

Gitt tre input-felt:

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

Bruk metoden call og funksjonen func for å skrive ut value for hvert av input-feltene.