Kontekstin perusteet JavaScriptissä

Oletetaan, että meillä on jokin funktio func, jossa käytetään this:

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

Mihin this viittaa tässä funktiossa? Emme tiedä. Eikä JavaScript tiedä. Eikä funktio itse tiedä. Toisin sanoen funktion luomishetkellä sitä, mihin this tarkalleen viittaa, ei ole määritetty. Ja se määrittyy vasta silloin, kun tämä funktio kutsutaan.

Oletetaan, että meillä on jokin syötekehys:

<input id="elem" value="text">

Liitetään tähän syötekehykseen funktiomme func siten, että se suoritetaan, kun syötekehys menettää kohdistuksen. Nyt funktion suoritushetkellä this viittaa syötekehykseemme:

let elem = document.querySelector('#elem');

elem.addEventListener('blur', func);
function func() {
	console.log(this.value); // menettäessään kohdistuksen tulostaa 'text'
}

Mutta meillä voi olla useampi kuin yksi syötekehys:

<input id="elem1" value="text1">
<input id="elem2" value="text2">

Ja jokaiseen näistä syötekehyksistä voimme liittää funktiomme func. Tässä tapauksessa ensimmäisen elementin kohdalla this funktion kutsun hetkellä viittaa siihen, ja toisen - siihen.

Käytännössä tämä tarkoittaa, että this funktion sisällä riippuu siitä, kummassa syötekehyksessä menetimme kohdistuksen:

let elem1 = document.querySelector('#elem1');
elem1.addEventListener('blur', func);

let elem2 = document.querySelector('#elem2');
elem2.addEventListener('blur', func);

function func() {
	console.log(this.value); // tulostaa joko 'text1' tai 'text2'
}

Yleisesti ottaen, tämä this:n ominaisuus on erittäin kätevä - luomme vain yhden funktion ja liitämme sen mihin tahansa määrään syötekehyksiä. Jos this ei viittaisi siihen elementtiin, jossa tapahtuma tapahtui, emme pystyisi tähän - jokaiselle syötekehykselle joutuisi luomaan oman funktionsa samalla koodilla!