Povezivanje konteksta pomoću metode bind u JavaScript-u

Sledeća metoda bind omogućava trajno povezivanje konteksta sa funkcijom. Ovaj metod kao rezultat vraća novu funkciju, unutar koje će this imati kruto zadatu vrednost.

Pogledajmo na primeru.

Neka imamo input:

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

Neka je referenca na ovaj input sačuvana u promenljivoj elem:

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

Neka imamo i sledeću funkciju func:

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

Hajde da pomoću bind napravimo novu funkciju, koja će biti kopija funkcije func, ali će this u njoj uvek biti jednak elem:

let newFunc = func.bind(elem);

Sada u promenljivoj newFunc se nalazi funkcija. Pozovimo je, prosledivši u prvi parametar '1', a u drugi '2' (podsećam, u elem se nalazi input sa value, jednakim 'text'):

newFunc('1', '2');

Hajde da sve skupimo zajedno:

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

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

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

Nije obavezno da se rezultat rada bind upisuje u novu funkciju newFunc, moguće je jednostavno prepisati func. Nakon toga će func biti ista funkcija kao i pre, ali sa kruto povezanim this:

func = func.bind(elem);

Neka je dat sledeći kod:

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

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

function func(name, surname) {
	console.log(this.value + ', ' + name + ' ' + surname);
}

// ovde napišite konstrukciju sa bind()

func('John', 'Smit'); // ovde treba da ispiše 'hello, John Smit'
func('Eric', 'Luis'); // ovde treba da ispiše 'hello, Eric Luis'

Napišite na naznačenom mestu konstrukciju sa metodom bind tako da this unutar funkcije func uvek pokazuje na input iz promenljive elem.