Прывязванне кантэксту праз метад bind у JavaScript

Наступны метад bind дазваляе назаўжды прывязаць кантэкст да функцыі. Сваім вынікам гэты метад вяртае новую функцыю, унутры якой this будзе мець жорстка зададзенае значэнне.

Давайце паглядзім на прыкладзе.

Хай у нас ёсць інпут:

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

Хай спасылка на гэты інпут запісаная ў зменную elem:

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

Хай у нас таксама ёсць наступная функцыя func:

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

Давайце з дапамогай bind зробім новую функцыю, якая будзе копіяй функцыі func, але this у ёй заўсёды будзе роўны elem:

javascriptlet newFunc = func.bind(elem);

Цяпер у зменнай newFunc ляжыць функцыя. Давайце выклічам яе, перадаўшы ў першы параметр '1', а ў другі '2' (нагадваю, што ў elem ляжыць інпут з value, роўным 'text'):

javascriptnewFunc('1', '2');

Давайце саберем усё разам:

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

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

let newFunc = func.bind(elem);
newFunc('1', '2'); // вывядзе 'text12'

Не абавязкова запісваць вынік працы bind у новую функцыю newFunc, можна проста перазапісаць func. Пасля гэтага func будзе такой жа функцыяй, як і была, але з жорстка звязаным 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);
}

// тут напішыце канструкцыю з bind()

func('John', 'Smit'); // тут павінна вывесці 'hello, John Smit'
func('Eric', 'Luis'); // тут павінна вывесці 'hello, Eric Luis'