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:

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

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

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

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

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

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

javascriptnewFunc('1', '2');

La oss sette alt sammen:

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

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);
}

// 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'