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

Entonces, hemos analizado cómo funciona realmente this. Ahora veamos los métodos que permiten indicar forzosamente en qué contexto se llama a una función (es decir, decir forzosamente a qué es igual this).

El primer método que analizaremos se llama call. Veamos su funcionamiento con un ejemplo. Supongamos que tenemos un input:

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

Obtengamos la referencia a este input y guardémosla en la variable elem:

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

Ahora creemos una función func, dentro de la cual mostraremos this.value:

javascriptfunction func() {
  console.log(this.value);
}

Por ahora, nuestra función no sabe a qué se refiere this. Si la vinculáramos a través de addEventListener, entonces sí. Pero no haremos eso. En su lugar, simplemente llamaremos a nuestra función, diciéndole que this debe ser igual a elem.

Esto se hace así: func.call(elem). Este código es equivalente a una llamada simple a la función func así: func(), solo con la condición de que this sea igual a elem.

Entonces, la sintaxis del método call es: función.call(objeto). Juntemos todo:

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

function func() {
  console.log(this.value); // mostrará el value del input
}
func.call(elem);

javascriptfunction func() {
  console.log(this.value);
}

html<input id="elem1" value="text1">
<input id="elem2" value="text2">
<input id="elem3" value="text3">