Kontekstbinding ved hjelp av bind-metoden i JavaScript

Den neste metoden bind lar deg binde konteksten til en funksjon permanent. Som resultat returnerer denne metoden en ny funksjon, der this vil ha en hardkodet verdi.

La oss se på et eksempel.

Anta at vi har et input-felt:

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

Anta at referansen til dette input-feltet er lagret i variabelen elem:

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

Anta at vi også har følgende funksjon func:

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

La oss ved hjelp av bind lage en ny funksjon som vil være en kopi av funksjonen func, men this i den vil alltid være lik elem:

let newFunc = func.bind(elem);

Nå ligger det en funksjon i variabelen newFunc. La oss kalle den, og sende inn '1' som første parameter, og '2' som den andre (jeg minner om at i elem ligger et input-felt med value lik 'text'):

newFunc('1', '2');

La oss sette 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 logge 'text12'

Det er ikke nødvendig å lagre resultatet av bind i en ny funksjon newFunc, man kan ganske enkelt overskrive func. Etter det vil func være den samme funksjonen som før, men med en hardkoblet this:

func = func.bind(elem);

Anta at følgende kode er gitt:

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

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

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

// skriv konstruksjonen med bind() her

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

Skriv på det angitte stedet en konstruksjon med metoden bind slik at this inni funksjonen func alltid peker på input-feltet fra variabelen elem.