Konteksti sidumine meetodi bind abil JavaScriptis

Järgmine meetod bind võimaldab konteksti funktsiooniga jäädvalt siduda. See meetod tagastab uue funktsiooni, mille sees this on rangelt määratud väärtusega.

Vaatame seda näite varal.

Oletame, et meil on input:

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

Oletame, et viide sellele inputile on salvestatud muutujasse elem:

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

Oletame, et meil on ka järgmine funktsioon func:

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

Teeme meetodi bind abil uue funktsiooni, mis on funktsiooni func koopia, kuid milles this on alati võrdne elem-ga:

let newFunc = func.bind(elem);

Nüüd asub muutujas newFunc funktsioon. Kutsume selle esile, edastades esimese parameetrina '1' ja teise '2' (meenutan, et elem sisaldab inputi väärtusega 'text'):

newFunc('1', '2');

Panime kõik kokku:

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

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

let newFunc = func.bind(elem);
newFunc('1', '2'); // väljastab 'text12'

Pole vaja bind tulemust salvestada uude funktsiooni newFunc, võib lihtsalt func üle kirjutada. Pärast seda on func sama funktsioon, mis enne, kuid rangelt seotud this-iga:

func = func.bind(elem);

Oletame, et on antud järgmine kood:

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

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

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

// kirjutage siia konstruktsioon bind()-iga

func('John', 'Smit'); // siin peaks väljastama 'hello, John Smit'
func('Eric', 'Luis'); // siin peaks väljastama 'hello, Eric Luis'

Kirjutage näidatud kohta konstruktsioon meetodiga bind nii, et this funktsiooni func sees viitaks alati muutujas elem olevale inputile.