Tämä-virhe JavaScriptin nuolifunktiokäsittelijässä

Viime aikoina on tullut muodikkaaksi käyttää kaikkialla nuolifunktioita tavallisten funktioiden sijasta. Näillä funktioilla on kuitenkin haittapuoli - ne eivät säilytä this-arvoa. Katsotaanpa, minkä ongelman kanssa voi törmätä tämän vuoksi.

Oletetaan, että meillä on painike:

<button>teksti</button>

Haetaan viite tähän painikkeeseen muuttujaan:

let button = document.querySelector('button');

Lisätään painikkeelle tapahtumankäsittelijä hyödyntäen nuolifunktiota:

button.addEventListener('click', () => {
	console.log(this.textContent);
});

Täällä meitä odottaakin yllätys: this nuolifunktiossa ei viittaa elementtiin, jossa tapahtuma tapahtui.

Katsotaan, mitä tälle voidaan tehdä.

Ratkaisu ensimmäinen

Voidaan luopua this-arvon käytöstä ja hyödyntää muuttujaa, johon tapahtuma on sidottu:

button.addEventListener('click', () => {
	console.log(button.textContent);
});

Ratkaisu toinen

Elementin, johon tapahtuma on sidottu, voi saada event.target-kautta:

button.addEventListener('click', (event) => {
	console.log(event.target.textContent);
});

Ratkaisu kolmas

Voidaan luopua nuolifunktiosta ja käyttää tavallista funktiota:

button.addEventListener('click', function() {
	console.log(this.textContent);
});