Přiřazování kontextu pomocí metody bind v JavaScriptu

Následující metoda bind umožňuje trvale přiřadit kontext funkci. Svým výsledkem tato metoda vrací novou funkci, uvnitř které this bude mít pevně nastavenou hodnotu.

Podívejme se na příklad.

Předpokládejme, že máme vstupní pole:

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

Předpokládejme, že odkaz na toto vstupní pole je uložen v proměnné elem:

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

Předpokládejme, že máme také následující funkci func:

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

Pomocí bind vytvořme novou funkci, která bude kopií funkce func, ale this v ní bude vždy rovno elem:

javascriptlet newFunc = func.bind(elem);

Nyní je v proměnné newFunc uložena funkce. Zavolejme ji a předejme jí první parametr '1' a druhý '2' (připomínám, že v elem je uloženo vstupní pole s value, rovným 'text'):

javascriptnewFunc('1', '2');

Pojďme to všechno spojit dohromady:

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

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

let newFunc = func.bind(elem);
newFunc('1', '2'); // vypíše 'text12'

Není nutné zapisovat výsledek práce bind do nové funkce newFunc, stačí přepsat func. Poté bude func stejnou funkcí, jako byla, ale s pevně svázaným 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);
}

// zde napište konstrukci s bind()

func('John', 'Smit'); // zde by mělo vypsat 'hello, John Smit'
func('Eric', 'Luis'); // zde by mělo vypsat 'hello, Eric Luis'