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:

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

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

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

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

Liitetään näihin painikkeisiin sama funktio:

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

Ja funktion sisällä tulostetaan this.value:

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

Annettu 5 kappaletta joillakin teksteillä. Kun napsautat mitä tahansa kappaletta, kirjoita sen tekstin loppuun huutomerkki.

Annettu 3 syötekenttää, joihin on kirjoitettu jotkin numerot. Kun kenttä menettää kohdistuksen, nosta siinä oleva luku neliöön.