Врзување на контекст преку методот bind во JavaScript

Следниот метод bind овозможува трајно да се врзе контекстот на функција. Како резултат овој метод враќа нова функција, во која this ќе има цврсто зададена вредност.

Да погледнеме на пример.

Нека имаме input поле:

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

Нека референцата кон ова input поле е запишана во променливата 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 се наоѓа input поле со 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'