Fondamenti del contesto in JavaScript

Supponiamo di avere una funzione func, all'interno della quale viene utilizzato this:

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

A cosa punta this in questa funzione? Non lo sappiamo. E JavaScript non lo sa. E la funzione stessa non lo sa. Cioè, nel momento della creazione della funzione, ciò a cui punta this non è definito. E sarà determinato solo quando questa funzione verrà chiamata.

Supponiamo di avere un input:

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

Colleghiamo a questo input la nostra funzione func in modo che venga eseguita quando l'input perde il focus. Ora, nel momento dell'esecuzione della funzione, this punterà al nostro input:

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

elem.addEventListener('blur', func);
function func() {
	console.log(this.value); // alla perdita del focus mostrerà 'text'
}

Ma potremmo non avere un solo input, bensì diversi:

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

E a ciascuno di questi input possiamo collegare la nostra funzione func. In questo caso, per il primo elemento this nel momento della chiamata della funzione punterà a esso, e per il secondo - a esso.

Nella pratica, questo significa che this all'interno della funzione dipende da quale input ha perso il focus:

let elem1 = document.querySelector('#elem1');
elem1.addEventListener('blur', func);

let elem2 = document.querySelector('#elem2');
elem2.addEventListener('blur', func);

function func() {
	console.log(this.value); // mostrerà 'text1' o 'text2'
}

In generale, questa caratteristica di this è molto conveniente - creiamo una sola funzione e la colleghiamo a qualsiasi numero di input. Se this non puntasse all'elemento in cui è avvenuto l'evento, non saremmo in grado di farlo - dovremmo creare per ogni input la propria funzione con lo stesso codice!