Ventaja de this en JavaScript

Por lo dicho anteriormente, aún no es obvia la ventaja especial de this. Después de todo, dentro de la función manejadora estaría disponible nuestro elemento - ya que la variable elem será global para nuestra función func:

let elem = document.querySelector('#elem');
elem.addEventListener('click', func);

function func() {
	// aquí está disponible la variable elem con nuestro elemento
}

Y, no es difícil deducir, que el contenido de this y el contenido de la variable elem en nuestro caso son iguales:

let elem = document.querySelector('#elem');
elem.addEventListener('click', func);

function func() {
	console.log(elem === this); // mostrará true
}

¿Cuál es la ventaja especial de this? Se manifiesta cuando tenemos varios elementos, y a cada uno está vinculada la misma función.

Veamos un ejemplo. Supongamos que tenemos 3 botones:

<input id="button1" type="submit" value="text1">
<input id="button2" type="submit" value="text2">
<input id="button3" type="submit" value="text3">

Obtenemos referencias a ellos en variables:

let button1 = document.querySelector('#button1');
let button2 = document.querySelector('#button2');
let button3 = document.querySelector('#button3');

Vinculamos a estos botones la misma función:

button1.addEventListener('click', func);
button2.addEventListener('click', func);
button3.addEventListener('click', func);

Y dentro de la función mostraremos this.value:

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

Resulta que tenemos tres botones. Hacer clic en cada botón llevará a la llamada de la función func. Al mismo tiempo, con cada clik this contendrá una referencia al botón en el que ocurrió el evento.

Es decir, cada clic mostrará en la consola el value del botón en el que ocurrió el clic, ¡pero lo hará la misma función func! He ahí la ventaja de usar this.

Se dan 5 párrafos con algunos textos. Al hacer clic en cualquier párrafo, escriba al final de su texto un signo de exclamación.

Se dan 3 inputs, en los que están escritos algunos números. Al perder el foco en cualquier input, eleve el número que contiene al cuadrado.