Свързване на контекст чрез метода 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'