Binding af kontekst via call-metoden i JavaScript

Så vi har fundet ud af, hvordan this faktisk fungerer. Lad os nu se på metoder, der giver os mulighed for at tvinge angivelse af, i hvilken kontekst en funktion kaldes (det vil sige at tvinge at sige, hvad this er lig med).

Den første metode, vi vil se på, hedder call. Lad os se på dens funktion med et eksempel. Lad os sige, at vi har et inputfelt:

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

Lad os hente referencen til dette inputfelt og gemme det i variablen elem:

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

Lad os nu lave en funktion func, inde i hvilken vi udskriver this.value:

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

Indtil videre ved vores funktion ikke, hvad this refererer til. Hvis vi bundet den gennem addEventListener, så ja. Men det vil vi ikke gøre. I stedet vil vi bare kalde vores funktion og fortælle den, at this skal være lig med elem.

Det gøres sådan her: func.call(elem). Denne kode svarer til et simpelt kald af funktionen func sådan her: func(), kun med betingelsen om, at this er lig med elem.

Så syntaksen for call-metoden er: funktion.call(objekt). Lad os samle alt sammen:

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

function func() {
	console.log(this.value); // vil udskrive inputfeltets value
}
func.call(elem);

Givet en funktion:

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

Givet tre inputfelter:

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

Brug metoden call og funktionen func til at udskrive value for hvert af inputfelterne.