Fördelen med this i JavaScript

Av det som sagts tidigare är den speciella fördelen med this inte uppenbar. Trots allt, inuti avlyssnarfunktionen kommer vårt element att vara tillgängligt ändå - eftersom variabeln elem kommer att vara global för vår funktion func:

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

function func() {
	// här är variabeln elem med vårt element tillgänglig
}

Och, det är inte svårt att inse, att innehållet i this och innehållet i variabeln elem i vårt fall är lika:

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

function func() {
	console.log(elem === this); // skriver ut true
}

Vad är då den speciella fördelen med this? Den visar sig när vi har flera element, och var och en är bunden till samma funktion.

Låt oss titta på ett exempel. Låt oss säga att vi har 3 knappar:

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

Låt oss hämta referenser till dem i variabler:

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

Låt oss binda samma funktion till dessa knappar:

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

Och inuti funktionen kommer vi att skriva ut this.value:

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

Resultatet blir att vi har tre knappar. Ett klick på varje knapp kommer att leda till att funktionen func anropas. Samtidigt kommer this vid varje klick att innehålla en referens till den knapp där händelsen inträffade.

Det betyder att varje klick kommer att skriva ut i konsolen value för den knapp som klickades på, men det kommer att göras av samma funktion func! Det är här fördelen med att använda this ligger.

Det finns 5 stycken med några texter. Vid klick på vilket stycke som helst, skriv ett utropstecken i slutet av dess text.

Det finns 3 inmatningsfält, där några tal är skrivna. Vid förlust av fokus i vilket inmatningsfält som helst, upphöj talet i det till kvadrat.