JavaScript

JAVASCRIPTIIN LIITTYVÄÄ KOULUTUSTA VUONNA 2025!

Kurssit saatavilla kautta Suomen. Tule ja varaa oma koulutustapahtumasi heti! Koulutuksen järjestää asiantuntijasi Koulutus- ja konsultointipalvelu KK Mediat.

OOP-JavaScript: Olion ominaisuudet

Olion ominaisuudet toimivat kuten muuttujat, mutta ne ovat olion sisäisesti määriteltyjä ja kuuluvat yksinomaan kyseiseen olioon. Esimerkiksi Auto-olion ominaisuuksia voivat olla merkki ja malli.

Ominaisuuden lisääminen literaalilla luotuun objektiin

Literaalilla luotuun objektiin lisätään ominaisuuksia käyttämällä syntaksia ominaisuus: arvo. Jos olioon halutaan lisätä useita ominaisuuksia, ne erotellaan toisistaan pilkulla. Esimerkiksi: 


const auto = {
  merkki: "Toyota",
  malli: "Corolla",
  väri: "Punainen",
  huippunopeusKmh: 180
};

Ominaisuuden luominen konstruktorifunktiossa

Ominaisuuden luominen konstruktorifunktion sisällä hyödyntää this-viittausta. this-viittaus osoittaa juuri siihen olion ilmentymään joka on luotavana. Tällä tavoin jokainen samaisesta oliosta luotu ilmentymä saa omat, oikeaan ilmentymään sidotut arvot käyttöönsä.


function Auto(merkki, malli, väri,nopeus) {
  this.merkki = merkki;
  this.malli = malli;
  this.väri = väri;
  this.huippunopeusKmh = nopeus;
}

const keijonAuto = new Auto("Audi", "A4", "Musta",180);

Ominaisuuden luominen Class-rakenteessa

this-viittausta käytetään myös ominaisuuksien määrittämiseen Class-rakenteen sisällä. Yleinen käytäntö on määrittää ominaisuudet rakentajametodin (constructor) sisään, jolloin ne ovat käytettävissä heti, kun ilmentymä luodaan. Tämä lähestymistapa auttaa pitämään luokkarakenteen keskitettynä, selkeänä ja ennustettavana. Vaikka ominaisuuksia voi määrittää myös constructor-metodin ulkopuolella, sitä ei yleensä suositella. 


class Auto {
  constructor(merkki, malli, väri,nopeus) {
    this.merkki = merkki;
    this.malli = malli;
    this.väri = väri;
    this.huippunopeusKmh = nopeus;
  }
}

const miikanAuto = new Auto("Opel", "Corsa", "Sininen", 165);

Ominaisuuden arvon asettaminen ja hakeminen

Ominaisuuden arvo voidaan asettaa tai hakea seuraavalla syntaksilla: 


// esimerkki asettamisesta
auto.merkki = "Toyota";

// esimerkki noutamisesta
console.log(auto.merkki);

JavaScriptin ES6-versio esitteli ominaisuuksien asettamiseen ja hakemiseen getter- ja setter-menetelmät. Ne kannattaa ottaa käyttöön, kun ominaisuuksien arvoja halutaan hallita ja validoida automaattisesti. 


class Auto {
  constructor(merkki, malli, väri,nopeus) {
    this.merkki = merkki;
    this.malli = malli;
    this.väri = väri;
    this.huippunopeusKmh = nopeus;
  }
  
  // Getter, joka palauttaa nopeuden
  get huippunopeus() {
    return this.huippunopeusKmh;
  }

  // Setter, joka asettaa nopeuden ja tarkistaa, että se on järkevä
  set huippunopeus(nopeus) {
    if (nopeus >= 0 && nopeus <= 400) {
      this.huippunopeusKmh = nopeus;
    } else {
      console.log("Virhe: Nopeus täytyy olla välillä 0 ja 400 km/h.");
    }
  }
}


const auto = new Auto("Toyota", "Corolla", "Punainen", 180);
console.log(auto.huippunopeus); // 180  - lukee arvon getterin avulla

auto.huippunopeus = 220; // asettaa nopeuden Setterin avulla

auto.huippunopeus = 500; // Virheellinen arvo, ei muuta nopeutta

OOP-JavaScript: Olion metodit

Olion metodi on toiminto, joka on liitetty olioon ja jonka avulla olio voi suorittaa tietyn tehtävän hyödyntäen sisäistä dataansa. Yksinkertaistuna metodia voi ajatella funktiona, joka on liitetty olioon ja joka hyödyntää olion ominaisuuksia. Esimerkiksi Auto-olion metodi voisi olla naytaTiedot, joka käyttää ilmentymän ominaisuuksia palauttaakseen arvon.

Nuolifunktioita (=>) ei yleensä käytetä metodirakenteiden ilmaisemiseen JavaScriptissä, koska ne eivät määrittele omaa this-kontekstia. Sen sijaan ne perivät this-arvon ympäröivästä, ulkoisesta kontekstista. Käytännössä tämä tarkoittaa, että nuolifunktiot eivät sovellu oliopohjaiseen JavaScriptin kirjoittamiseen.

Metodin luominen objektin literaalille

Metodin lisääminen objektin literaalille tapahtuu syntaksilla metodi: function(){}. Jos literaalissa on useita metodeja, ne erotetaan toisistaan pilkulla. Esimerkiksi: 


const auto = {
  merkki: "Toyota",
  malli: "Corolla",
  väri: "Punainen",
  huippunopeusKmh: 180, 
  näytäTiedot: function() {
    console.log(`${this.merkki} ${this.malli} (${this.väri})`);
  }
};

auto.näytäTiedot(); // Toyota Corolla (Punainen)

Metodien luominen konstruktorifunktiolle

Metodien luominen konstruktorifunktion sisällä hyödyntää this-viittausta ja funktioilmaisua. Koska oliosta voi olla olemassa lukuisia ilmentymiä ja metodit halutaan sitoa aina kuhunkin ilmentymään, avuksi tulee taas kerran this-viittaus. Sen avulla metodi viittaa oikeassa kontekstissa. 


function Auto(merkki, malli, väri,nopeus) {
  this.merkki = merkki;
  this.malli = malli;
  this.väri = väri;
  this.huippunopeusKmh = nopeus;
  this.omistaja = "Keijo"
  this.näytäTiedot = function() {
    console.log(`${this.omistaja}: ${this.merkki} ${this.malli} (${this.väri})`);
  };
}

const keijonAuto = new Auto("Audi", "A4", "Musta",180);
keijonAuto.näytäTiedot(); // Keijo: Audi A4 (Musta)

Metodin luominen Class-rakenteessa

Class-rakenteessa metodi luodaan käyttämällä funktiomäärittelyn syntaksia, mutta ilman function-avainsanaa. 


class Auto {
  constructor(merkki, malli, väri,nopeus) {
    this.merkki = merkki;
    this.malli = malli;
    this.väri = väri;
	this.huippunopeusKmh = nopeus;
	this.omistaja = "Miikka";
  }
  
  näytäTiedot() {
    console.log(`${this.omistaja}: ${this.merkki} ${this.malli} (${this.väri})`);
  }
}

const miikanAuto = new Auto("Opel", "Corsa", "Sininen", 165);
miikanAuto.näytäTiedot(); // Miikka: Opel Corsa (Sininen)

Artikkelin tiedot

Otsikko: OOP-JavaScript: Olion ominaisuudet ja metodi

Kuvaus: Paranna JS-koodin selkeyttä oliopohjaisen ohjelmoinnin avulla. Opi luomaan, asettamaan ja hakemaan olion ominaisuuksia ja metodeja.

Julkaisija: Koulutus- ja konsultointipalvelu KK Mediat

Viimeksi päivitetty: