Kontekstbinding deur die bind-metode in JavaScript

Die volgende metode bind laat toe om konteks permanent aan 'n funksie te bind. Hierdie metode lewer as resultaat 'n nuwe funksie, waarin this 'n vasgestelde waarde sal hê.

Kom ons kyk na 'n voorbeeld.

Gestel ons het 'n invoerveld:

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

Gestel die verwysing na hierdie invoerveld is in die veranderlike elem gestoor:

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

Gestel ons het ook die volgende funksie func:

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

Kom ons maak met bind 'n nuwe funksie wat 'n kopie van funksie func is, maar this daarin sal altyd gelyk wees aan elem:

javascriptlet newFunc = func.bind(elem);

Nou lê daar 'n funksie in die veranderlike newFunc. Kom ons roep dit aan, deur die eerste parameter '1', en die tweede '2' te stuur (ek herinner u daaraan dat in elem 'n invoerveld met value wat gelyk is aan 'text' lê):

javascriptnewFunc('1', '2');

Kom ons saam dit alles saam:

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

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

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

Dit is nie nodig om die resultaat van die werk bind in 'n nuwe funksie newFunc te stoor nie, jy kan net func ooranskryf. Daarna sal func dieselfde funksie wees as tevore, maar met 'n vaste gebonde 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);
}

// skryf hier die konstruksie met bind()

func('John', 'Smit'); // hier moet 'hello, John Smit' uitvoer
func('Eric', 'Luis'); // hier moet 'hello, Eric Luis' uitvoer