Bindning av kontext via metoden call i JavaScript

Så, vi har gått igenom hur this egentligen fungerar. Låt oss nu titta på metoder som gör det möjligt att framtvinga vilken kontext som en funktion anropas i (det vill säga att framtvinga vad this är lika med).

Den första metoden vi ska titta på heter call. Låt oss se den i praktiken med ett exempel. Låt oss säga att vi har ett inputfält:

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

Låt oss hämta en referens till detta inputfält och spara den i variabeln elem:

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

Låt oss nu skapa en funktion func, inuti vilken vi skriver ut this.value:

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

För närvarande vet vår funktion inte vad this refererar till. Om vi skulle binda den via addEventListener, då skulle den veta. Men det kommer vi inte att göra. Istället kommer vi helt enkelt att anropa vår funktion och tala om för den att this ska vara lika med elem.

Detta görs så här: func.call(elem). Denna kod motsvarar ett enkelt funktionsanrop func så här: func(), men med villkoret att this är lika med elem.

Så, syntaxen för metoden call är: funktion.call(objekt). Låt oss samla allt tillsammans:

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

function func() {
	console.log(this.value); // skriver ut inputfältets value
}
func.call(elem);

Givet en funktion:

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

Givet tre inputfält:

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

Använd metoden call och funktionen func för att skriva ut value för varje inputfält.