Vinculación de contexto mediante el método bind en JavaScript

El siguiente método bind permite vincular el contexto a una función permanentemente. Como resultado, este método devuelve una nueva función, dentro de la cual this tendrá un valor fijado de forma rígida.

Veamos un ejemplo.

Supongamos que tenemos un input:

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

Supongamos que la referencia a este input está almacenada en la variable elem:

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

Supongamos también que tenemos la siguiente función func:

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

Usemos bind para crear una nueva función, que será una copia de la función func, pero this en ella siempre será igual a elem:

let newFunc = func.bind(elem);

Ahora en la variable newFunc hay una función. Llamémosla, pasando en el primer parámetro '1', y en el segundo '2' (recuerde que en elem está el input con value, igual a 'text'):

newFunc('1', '2');

Juntemos todo:

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

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

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

No es necesario guardar el resultado del trabajo de bind en una nueva función newFunc, se puede simplemente sobrescribir func. Después de esto, func será la misma función que era, pero con un this fuertemente vinculado:

func = func.bind(elem);

Supongamos que se da el siguiente código:

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

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

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

// escriba aquí la construcción con bind()

func('John', 'Smit'); // aquí debería mostrar 'hello, John Smit'
func('Eric', 'Luis'); // aquí debería mostrar 'hello, Eric Luis'

Escriba en el lugar indicado la construcción con el método bind de modo que this dentro de la función func siempre apunte al input de la variable elem.