Viaženie kontextu pomocou metódy bind v JavaScripte

Ďalšia metóda bind umožňuje natrvalo viazať kontext k funkcii. Svojím výsledkom táto metóda vráti novú funkciu, vnútri ktorej this bude mať pevne nastavenú hodnotu.

Pozrime sa na príklad.

Majme input:

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

Nech odkaz na tento input je uložený v premennej elem:

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

Nech máme aj nasledujúcu funkciu func:

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

Pomocou bind vytvorme novú funkciu, ktorá bude kópiou funkcie func, ale this v nej bude vždy rovný elem:

javascriptlet newFunc = func.bind(elem);

Teraz v premennej newFunc leží funkcia. Zavolajme ju, pričom do prvého parametra pošleme '1' a do druhého '2' (pripomínam, že v elem je input s value, rovným 'text'):

javascriptnewFunc('1', '2');

Poďme to dať dokopy:

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'

Nie je nevyhnutné zapisovať výsledok práce bind do novej funkcie newFunc, stačí prepísať func. Po tom func bude rovnakou funkciou, ako bola, ale s pevne zviazaný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);
}

// tu napíšte konštrukciu s bind()

func('John', 'Smit'); // tu by malo vypísať 'hello, John Smit'
func('Eric', 'Luis'); // tu by malo vypísať 'hello, Eric Luis'