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:

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

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

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

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

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

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

javascriptnewFunc('1', '2');

Apvienosim visu kopā:

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

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

// šeit ierakstiet konstrukciju ar bind()

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