Fundamentos del trabajo con contexto en JavaScript

Supongamos que tenemos alguna función func, dentro de la cual se utiliza this:

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

¿A qué apunta this en esta función? Pues no lo sabemos. Y JavaScript no lo sabe. Y la propia función no lo sabe. Es decir, en el momento de creación de la función, a qué apunta exactamente this, no está definido. Y se determinará sólo cuando esa función sea llamada.

Supongamos que tenemos algún input:

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

Asociemos a este input nuestra función func para que se ejecute cuando el input pierda el foco. Ahora, en el momento de ejecución de la función, this apuntará a nuestro input:

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

elem.addEventListener('blur', func);
function func() {
  console.log(this.value); // al perder el foco mostrará 'text'
}

Pero podríamos tener no uno, sino varios inputs:

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

Y a cada uno de estos inputs podemos asociar nuestra función func. En este caso, para el primer elemento this en el momento de la llamada de la función apuntará a él, y para el segundo - a él.

En la práctica, esto significa que this dentro de la función depende de en cuál de los inputs perdamos el foco:

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

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

function func() {
  console.log(this.value); // mostrará o 'text1', o 'text2'
}

En general, esta característica de this es muy conveniente - creamos solo una función y la asociamos a cualquier cantidad de inputs. Si this no apuntara al elemento en el que ocurrió el evento, entonces no podríamos hacerlo - ¡tendríamos que para cada input crear su propia función con el mismo código!