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:

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

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

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

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

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

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

javascriptnewFunc('1', '2');

Lad os samle 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 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:

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 konstruktionen med bind() her

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