Etusivu » Blogi » Mikä on this-avainsanan käyttötarkoitus JavaScriptissä?

Olli Perikanta

Julkaistu 19.1.2024

Mikä on this-avainsanan käyttötarkoitus JavaScriptissä?

JavaScriptin this-avainsanaa käytetään viittaamaan objektiin, joka on ”omistaja” tai ”suorittaja” kyseisessä kontekstissa. this voi saada erilaisia arvoja riippuen siitä, missä kontekstissa se esiintyy.

Kun käytät this-avainsanaa tavallisessa funktiossa, sen arvo riippuu siitä, miten funktiota kutsutaan. Jos funktiota kutsutaan objektin metodina, this viittaa siihen objektiin. Jos sitä kutsutaan ilman erityistä kontekstia (globaalisti), this viittaa globaaliin objektiin.

Tässä on muutamia yleisiä tilanteita, joissa this-avainsanaa käytetään:

Globaali konteksti

function esimerkkiFunktio() {
    console.log(this);
}

esimerkkiFunktio(); // 'this' viittaa globaaliin objektiin

Tai

console.log(this); // Globaali konteksti

Funktion sisällä

Kun this esiintyy tavallisessa funktiossa (ei nuolifunktiossa), sen arvo riippuu siitä, miten funktiota kutsutaan. Jos se kutsutaan objektin metodina, this viittaa siihen objektiin. Jos se kutsutaan irrallisena funktiona, this viittaa globaaliin objektiin (kuten ylempänä esimerkissä tehdään).

function esimerkkiFunktio() {
    console.log(this);
}

var objekti = {
    metodi: esimerkkiFunktio
};

objekti.metodi();        // 'this' viittaa 'objekti'-objektiin

Nuolifunktio

Nuolifunktiot eivät sido this-avainsanaa, vaan ne ottavat sen ympäröivästä kontekstista. Tämä voi olla hyödyllistä esimerkiksi tapauksissa, joissa haluat säilyttää tietyn this-arvon toiminnon sisällä.

var objekti = {
    nimi: 'Esimerkki',
    tulostaNimi: function() {
        setTimeout(() => {
            console.log(this.nimi);
        }, 1000);
    }
};

objekti.tulostaNimi(); // 'this' viittaa edelleen 'objekti'-objektiin

Constructor-funktio

this-avainsana constructor-funktion sisällä viittaa uuteen luotuun objektiin. Tätä käytetään yleensä luodessa uusia objekteja.

function Henkilo(nimi) {
    this.nimi = nimi;
}

var henkilo1 = new Henkilo('Matti');
console.log(henkilo1.nimi); // 'this' viittaa 'henkilo1'-objektiin

On tärkeää kiinnittää huomiota siihen, missä kontekstissa funktio suoritetaan, jotta this-avainsana saa odotetun arvon.

Senior Frontend kehittäjä, joka on erikoistunut WordPressin koodaamiseen ja räätälöityjen ratkaisujen tekemiseen.