Legarea contextului prin metoda bind în JavaScript

Următoarea metodă bind permite legarea contextului la o funcție permanent. Această metodă returnează o nouă funcție, în interiorul căreia this va avea o valoare fixată rigid.

Să ne uităm la un exemplu.

Să presupunem că avem un câmp de introducere:

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

Să presupunem că referința la acest câmp de introducere este stocată în variabila elem:

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

Să presupunem că avem și următoarea funcție func:

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

Să folosim bind pentru a crea o nouă funcție, care va fi o copie a funcției func, dar this în ea va fi întotdeauna egal cu elem:

let newFunc = func.bind(elem);

Acum, în variabila newFunc se află o funcție. Să o apelăm, transmitând primul parametru '1', iar al doilea '2' (reamintesc că în elem se află câmpul de introducere cu value, egal cu 'text'):

newFunc('1', '2');

Să punem totul împreună:

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

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

let newFunc = func.bind(elem);
newFunc('1', '2'); // va afișa 'text12'

Nu este obligatoriu să stochezi rezultatul lui bind într-o nouă funcție newFunc, poți pur și simplu să suprascrii func. După aceasta, func va fi aceeași funcție ca și înainte, dar cu this legat rigid:

func = func.bind(elem);

Să presupunem că este dat următorul cod:

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

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

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

// scrieți aici construcția cu bind()

func('John', 'Smit'); // aici ar trebui să afișeze 'hello, John Smit'
func('Eric', 'Luis'); // aici ar trebui să afișeze 'hello, Eric Luis'

Scrieți în locul indicat construcția cu metoda bind astfel încât this în interiorul funcției func să indice întotdeauna către câmpul de introducere din variabila elem.