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

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

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

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

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

Нека референцата кон ова input поле е запишана во променливата elem:

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

Нека имаме и следнава функција func:

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

Да направиме со bind нова функција, која ќе биде копија на функцијата func, но this во неа секогаш ќе биде еднаква на elem:

let newFunc = func.bind(elem);

Сега во променливата newFunc се наоѓа функција. Да ја повикаме, пренесувајќи го во првиот параметар '1', а во вториот '2' (потсетување, во elem се наоѓа input поле со value, еднакво на 'text'):

newFunc('1', '2');

Да собереме сè заедно:

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

func = func.bind(elem);

Нека е даден следниот код:

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

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

Напишете на означеното место конструкција со методот bind така што this внатре во функцијата func секогаш да покажува на input полето од променливата elem.