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:

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

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

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

Gestel ons het ook die volgende funksie func:

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

let 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ê):

newFunc('1', '2');

Kom ons saam dit alles saam:

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

func = func.bind(elem);

Gestel die volgende kode word gegee:

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

let 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

Skryf op die aangeduide plek 'n konstruksie met die metode bind sodat this binne die funksie func altyd na die invoerveld van die veranderlike elem wys.