Fordelen med this i JavaScript

Av det som er sagt tidligere er den spesielle fordelen med this ikke åpenbar. Tross alt, inne i tilbakakingsfunksjonen vil vårt element være tilgjengelig – fordi variabelen elem vil være global for vår funksjon func:

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

function func() {
	// her er variabelen elem med vårt element tilgjengelig
}

Og det er ikke vanskelig å forstå at innholdet i this og innholdet i variabelen elem i vårt tilfelle er like:

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

function func() {
	console.log(elem === this); // vil logge true
}

Hva er da den spesielle fordelen med this? Den viser seg når vi har flere elementer, og det samme funksjonen er knyttet til hver av dem.

La oss se på et eksempel. La oss si vi har 3 knapper:

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

La oss hente referanser til dem i variabler:

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

La oss knytte den samme funksjonen til disse knappene:

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

Og inne i funksjonen skal vi logge this.value:

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

Resultatet blir at vi har tre knapper. Etter å ha trykket på hver knapp vil funksjonen func bli kalt. Samtidig, for hvert klikk vil this inneholde en referanse til den knappen der hendelsen skjedde.

Det vil si at hvert trykk vil logge value til den knappen det ble trykket på, men dette vil bli gjort av den samme funksjonen func! Det er i dette fordelen med å bruke this ligger.

Det er gitt 5 avsnitt med noen tekster. Ved klikk på et hvilket som helst avsnitt, skriv et utropstegn på slutten av teksten.

Det er gitt 3 input-felt, der det står noen tall. Ved tap av fokus i et hvilket som helst input-felt, opphøy tallet som står i det i andre potens.