Binding af kontekst via bind-metoden i JavaScript

Den næste metode bind tillader at binde konteksten til en funktion permanent. Som resultat returnerer denne metode en ny funktion, hvor this vil have en fastsat værdi.

Lad os se på et eksempel.

Antag, at vi har et inputfelt:

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

Antag, at referencen til dette inputfelt er gemt i variablen elem:

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

Antag, at vi også har følgende funktion func:

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

Lad os ved hjælp af bind lave en ny funktion, som vil være en kopi af funktionen func, men this i den vil altid være lig med elem:

let newFunc = func.bind(elem);

Nu ligger der en funktion i variablen newFunc. Lad os kalde den og sende '1' som den første parameter og '2' som den anden (jeg minder om, at elem indeholder inputfeltet med value lig med 'text'):

newFunc('1', '2');

Lad os samle alt sammen:

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

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

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

Det er ikke nødvendigt at gemme resultatet af bind i en ny funktion newFunc, man kan simpelthen overskrive func. Efter det vil func være den samme funktion som før, men med en fast bundet this:

func = func.bind(elem);

Antag, at følgende kode er givet:

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

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

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

// skriv konstruktionen med bind() her

func('John', 'Smit'); // her skal det udskrive 'hello, John Smit'
func('Eric', 'Luis'); // her skal det udskrive 'hello, Eric Luis'

Skriv på det angivne sted en konstruktion med metoden bind, således at this inde i funktionen func altid peger på inputfeltet fra variablen elem.