Konteksta piesiešana ar bind metodi JavaScript

Nākamā metode bind ļauj pastāvīgi piesiet kontekstu funkcijai. Šī metode atgriež jaunu funkciju, kuras iekšienē this būs stingri noteikta vērtība.

Apskatīsim piemērā.

Pieņemsim, ka mums ir ievades lauks:

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

Pieņemsim, ka saite uz šo ievades lauku ir saglabāta mainīgajā elem:

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

Pieņemsim, ka mums ir arī šāda funkcija func:

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

Izmantosim bind, lai izveidotu jaunu funkciju, kas būs funkcijas func kopija, bet this tajā vienmēr būs vienāds ar elem:

let newFunc = func.bind(elem);

Tagad mainīgajā newFunc atrodas funkcija. Izsauksim to, padodot pirmajā parametrā '1', bet otrajā '2' (atgādinu, ka elem atrodas ievades lauks ar value, vienādu ar 'text'):

newFunc('1', '2');

Apvienosim visu kopā:

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

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

let newFunc = func.bind(elem);
newFunc('1', '2'); // izvadīs 'text12'

Nav obligāti jāieraksta metodes bind rezultāts jaunā funkcijā newFunc, var vienkārši pārrakstīt func. Pēc tam func būs tāda pati funkcija, kāda tā bija, bet ar stingri sasietu this:

func = func.bind(elem);

Pieņemsim, ka dots šāds kods:

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

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

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

// šeit ierakstiet konstrukciju ar bind()

func('John', 'Smit'); // šeit jāizvada 'hello, John Smit'
func('Eric', 'Luis'); // šeit jāizvada 'hello, Eric Luis'

Rakstiet norādītajā vietā konstrukciju ar metodi bind tā, lai this funkcijas func iekšienē vienmēr norādītu uz ievades lauku no mainīgā elem.