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:

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

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

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

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

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

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

newFunc('1', '2');

Pojďme to všechno spojit dohromady:

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

func = func.bind(elem);

Předpokládejme následující kód:

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

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

Napište na uvedené místo konstrukci s metodou bind tak, aby this uvnitř funkce func vždy ukazovalo na vstupní pole z proměnné elem.