Binding del contesto con il metodo bind in JavaScript

Il metodo successivo bind consente di legare permanentemente il contesto a una funzione. Questo metodo restituisce una nuova funzione, all'interno della quale this avrà un valore rigidamente impostato.

Vediamo un esempio.

Supponiamo di avere un input:

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

Supponiamo che il riferimento a questo input sia memorizzato in una variabile elem:

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

Supponiamo inoltre di avere la seguente funzione func:

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

Utilizziamo bind per creare una nuova funzione, che sarà una copia della funzione func, ma this in essa sarà sempre uguale a elem:

let newFunc = func.bind(elem);

Ora nella variabile newFunc si trova una funzione. Chiamiamola, passando nel primo parametro '1', e nel secondo '2' (ricordo che in elem si trova l'input con value, uguale a 'text'):

newFunc('1', '2');

Mettiamo tutto insieme:

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

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

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

Non è necessario memorizzare il risultato dell'operazione di bind in una nuova funzione newFunc, si può semplicemente sovrascrivere func. Dopo ciò, func sarà la stessa funzione di prima, ma con this rigidamente collegato:

func = func.bind(elem);

Supponiamo di avere il seguente codice:

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

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

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

// qui scrivete la costruzione con bind()

func('John', 'Smit'); // qui dovrebbe visualizzare 'hello, John Smit'
func('Eric', 'Luis'); // qui dovrebbe visualizzare 'hello, Eric Luis'

Scrivete nel punto indicato la costruzione con il metodo bind in modo che this all'interno della funzione func punti sempre all'input della variabile elem.