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

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

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

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

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

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

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

newFunc('1', '2');

Sujungkime viską kartu:

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

func = func.bind(elem);

Tarkime, kad duotas toks kodas:

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

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

Parašykite nurodytoje vietoje konstrukciją su metodu bind taip, kad this funkcijos func viduje visada rodytų į įvesties lauką iš kintamojo elem.