Binding del contesto tramite il metodo call in JavaScript

Quindi, abbiamo analizzato come funziona realmente this. Ora esaminiamo i metodi che consentono di specificare forzatamente in quale contesto viene chiamata una funzione (cioè dire forzatamente a cosa è uguale this).

Il primo metodo che analizzeremo si chiama call. Osserviamone il funzionamento con un esempio. Supponiamo di avere un input:

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

Otteniamo il riferimento a questo input e salviamolo in una variabile elem:

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

Ora creiamo una funzione func, all'interno della quale stampiamo this.value:

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

Per ora la nostra funzione non sa a cosa si riferisce this. Se la associassimo tramite addEventListener, allora sì. Ma non lo faremo. Invece, chiameremo semplicemente la nostra funzione, dicendole che this deve essere uguale a elem.

Questo si fa così: func.call(elem). Questo codice è equivalente a una semplice chiamata della funzione func così: func(), solo con la condizione che this sia uguale a elem.

Quindi, la sintassi del metodo call è questa: funzione.call(oggetto). Mettiamo tutto insieme:

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

function func() {
	console.log(this.value); // stamperà il value dell'input
}
func.call(elem);

Data la funzione:

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

Dati tre input:

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

Utilizzando il metodo call e la funzione func stampa a schermo il value di ciascuno degli input.