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:

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

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

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

Stel we hebben ook de volgende functie func:

javascriptfunction 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:

javascriptlet 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'):

javascriptnewFunc('1', '2');

Laten we alles samenvoegen:

javascriptlet 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:

javascriptfunc = func.bind(elem);

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

javascriptlet 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