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:

javascriptlet 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:

javascriptlet 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:

html<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:

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

La oss knytte den samme funksjonen til disse knappene:

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

Og inne i funksjonen skal vi logge this.value:

javascriptfunction 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.