Context binding via de call methode in JavaScript

Dus, we hebben uitgezocht hoe this echt werkt. Laten we nu de methodes bekijken die het mogelijk maken om geforceerd aan te geven in welke context een functie wordt aangeroepen (dat wil zeggen geforceerd zeggen waar this gelijk aan is).

De eerste methode die we zullen behandelen, heet call. Laten we de werking ervan bekijken aan de hand van een voorbeeld. Stel we hebben een input:

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

Laten we een referentie naar deze input ophalen en deze in een variabele elem opslaan:

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

Laten we nu een functie func maken, waarin we this.value uitloggen:

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

Onze functie weet nog niet waarnaar this verwijst. Als we hem zouden binden via addEventListener, dan wel. Maar dat gaan we niet doen. In plaats daarvan roepen we onze functie gewoon aan, en zeggen we haar dat this gelijk moet zijn aan elem.

Dit gaat als volgt: func.call(elem). Deze code is equivalent aan het simpel aanroepen van de functie func als volgt: func(), alleen met de voorwaarde dat this gelijk is aan elem.

Dus, de syntaxis van de call methode is als volgt: functie.call(object). Laten we alles samenvoegen:

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

function func() {
	console.log(this.value); // geeft de value van de input weer
}
func.call(elem);

Gegeven is de functie:

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

Gegeven zijn drie inputs:

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

Gebruik de methode call en de functie func om de value van elk van de inputs op het scherm weer te geven.