Wiązanie kontekstu za pomocą metody bind w JavaScript

Następna metoda bind pozwala na trwałe powiązanie kontekstu z funkcją. Wynikiem działania tej metody jest nowa funkcja, wewnątrz której this będzie miało sztywno przypisaną wartość.

Spójrzmy na przykład.

Załóżmy, że mamy input:

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

Załóżmy, że referencja do tego inputa jest zapisana w zmiennej elem:

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

Załóżmy, że mamy również następującą funkcję func:

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

Użyjmy bind, aby stworzyć nową funkcję, która będzie kopią funkcji func, ale this w niej zawsze będzie równe elem:

javascriptlet newFunc = func.bind(elem);

Teraz w zmiennej newFunc znajduje się funkcja. Wywołajmy ją, przekazując w pierwszym parametrze '1', a w drugim '2' (przypominam, że w elem znajduje się input z value, równym 'text'):

javascriptnewFunc('1', '2');

Złóżmy wszystko w całość:

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

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

let newFunc = func.bind(elem);
newFunc('1', '2'); // wypisze 'text12'

Nie jest konieczne zapisywanie wyniku działania bind w nowej funkcji newFunc, można po prostu nadpisać func. Po tym func będzie taką samą funkcją, jak była, ale z sztywno związanym 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);
}

// tutaj napisz konstrukcję z bind()

func('John', 'Smit'); // tutaj powinno wypisać 'hello, John Smit'
func('Eric', 'Luis'); // tutaj powinno wypisać 'hello, Eric Luis'