Context binding via de bind methode in JavaScript

De volgende methode bind maakt het mogelijk om de context permanent aan een functie te binden. Deze methode geeft als resultaat een nieuwe functie terug, waarin this een rigide vastgestelde waarde zal hebben.

Laten we naar een voorbeeld kijken.

Stel we hebben een input:

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

Stel dat de verwijzing naar deze input is opgeslagen in de variabele elem:

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

Stel we hebben ook de volgende functie func:

function func(param1, param2) {
	console.log(this.value + param1 + param2);
}

Laten we met bind een nieuwe functie maken, die een kopie zal zijn van functie func, maar this zal er altijd gelijk zijn aan elem:

let newFunc = func.bind(elem);

Nu ligt er in de variabele newFunc een functie. Laten we hem aanroepen, waarbij we de eerste parameter '1' meegeven, en de tweede '2' (ter herinnering: in elem zit een input met value, gelijk aan 'text'):

newFunc('1', '2');

Laten we alles samenvoegen:

let elem = document.getElementById('elem');

function func(param1, param2) {
	console.log(this.value + param1 + param2);
}

let newFunc = func.bind(elem);
newFunc('1', '2'); // geeft 'text12' weer

Het is niet verplicht om het resultaat van de werking van bind in een nieuwe functie newFunc op te slaan, je kunt simpelweg func overschrijven. Na dit zal func dezelfde functie zijn als ervoor, maar met een rigide gebonden this:

func = func.bind(elem);

Stel de volgende code is gegeven:

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

let elem = document.getElementById('elem');

function func(name, surname) {
	console.log(this.value + ', ' + name + ' ' + surname);
}

// schrijf hier de constructie met bind()

func('John', 'Smit'); // hier zou 'hello, John Smit' moeten verschijnen
func('Eric', 'Luis'); // hier zou 'hello, Eric Luis' moeten verschijnen

Schrijf op de aangegeven plek de constructie met methode bind zo, dat this binnenin de functie func altijd naar de input van variabele elem wijst.