Konteksto pririšimas naudojant bind metodą JavaScript

Kitas metodas bind leidžia visam laikui pririšti kontekstą prie funkcijos. Šis metodas grąžina naują funkciją, kurios viduje this turės griežtai nustatytą reikšmę.

Pažiūrėkime pavyzdžiu.

Tarkime, kad turime įvesties lauką:

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

Tarkime, kad nuoroda į šį įvesties lauką įrašyta į kintamąjį elem:

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

Tarkime, kad taip pat turime šią funkciją func:

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

Naudodami bind sukurkime naują funkciją, kuri bus funkcijos func kopija, bet this joje visada bus lygus elem:

javascriptlet newFunc = func.bind(elem);

Dabar kintamajame newFunc yra funkcija. Iškvieskime ją, perduodant į pirmą parametrą '1', o į antrą '2' (primenu, kad elem yra įvesties laukas su value, lygiu 'text'):

javascriptnewFunc('1', '2');

Sujungkime viską kartu:

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

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

let newFunc = func.bind(elem);
newFunc('1', '2'); // išves 'text12'

Nebūtinai reikia įrašyti bind rezultatą į naują funkciją newFunc, galima tiesiog perrašyti func. Po to func bus tokia pati funkcija, kaip ir buvo, bet su griežtai surištu 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);
}

// čia parašykite konstrukciją su bind()

func('John', 'Smit'); // čia turi išvesti 'hello, John Smit'
func('Eric', 'Luis'); // čia turi išvesti 'hello, Eric Luis'