this:n etu JavaScriptissä

Aiemmin esitetystä ei ole vielä ilmeistä this:n erityisetu. Loppujen lopuksi tapahtumankäsittelijäfunktion sisällä elementtimme on kuitenkin saatavilla - koska muuttuja elem on globaali funktiollemme func:

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

function func() {
  // tässä on saatavilla muuttuja elem elementillämme
}

Eikä ole vaikea ymmärtää, että this:n sisältö ja muuttujan elem sisältö meidän tapauksessamme ovat yhtä suuret:

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

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

Mikä on sitten this:n erityisetu? Se ilmenee, kun meillä on useita elementtejä, ja jokaiseen on sidottu sama funktio.

Katsotaan esimerkkiä. Olkoon meillä 3 painiketta:

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

Saadaan viittaukset niihin muuttujiin:

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

Liitetään näihin painikkeisiin sama funktio:

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

Ja funktion sisällä tulostetaan this.value:

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

Käy niin, että meillä on kolme painiketta. Kunkin painikkeen painaminen johtaa funktion func kutsumiseen. Samalla jokaisella klikkauksella this sisältää viittauksen siihen painikkeeseen, jossa tapahtuma tapahtui.

Eli jokainen painallus tulostaa konsoliin siihen painikkeeseen liittyvän value:n, jossa painallus tapahtui, mutta tekee tämän yksi ja sama funktio func! Se on this:n käytön etu.