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:

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

Oletame, et viide sellele inputile on salvestatud muutujasse elem:

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

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

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

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

javascriptnewFunc('1', '2');

Panime kõik kokku:

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

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

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