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.

Oliopohjaisen ohjelmoinnin (OOP) perusteet JavaScriptissä

JavaScript ei ole puhtaasti oliopohjainen kieli, mutta se tukee olio-ohjelmointia monipuolisesti. Oliot muodostavat useimpien JavaScriptin peruselementtien, kuten taulukoiden, funktioiden ja merkkijonojen, perustan. Tämä tekee olioista keskeisen osan JavaScript-kehitystä.

Mikä on olio?

Yksinkertaistettuna olio on abstraktio konkreettisesta asiasta. Se on kokoelma toisiinsa liittyviä ominaisuuksia (properties) ja toimintoja (methods). Esimerkiksi:

Oliot auttavat organisoimaan koodia ja edesauttavat sen uudelleenkäyttöä. Sen sijaan, että copypastettaisiin samaa proseduraalista koodia, voidaan siitä luoda olio ja käyttää sitä uudelleen.

Kolme tapaa olion luomiseksi JavaScriptissä

JavaScript tarjoaa kolme eri tapaa olion luomiseksi:

Olion luominen objektin literaalilla

Yksinkertaisin tapa olion luomiseksi on käyttää literaalia. Literaali on pohjimmiltaan tekstimuotoinen tapa määrittää olion rakenne ilman erillisiä luokkia tai konstruktoreita.

Alla uuden olion perussyntaksi literaalin avulla luotuna: 


const olio = {
    // ominaisuudet + metodit
};

Tätä lähestymistapaa käytetään yksittäisten ja yksinkertaisten datarakenteiden kuvaamiseen tilanteissa, joissa oliosta ei tarvita useita ilmentymiä.

Jos literaalin perusteella halutaan luoda useita ilmentymiä, rakenne tulisi kääriä nk. tehdasfunktion (factory function) sisään: 


function luoOlio() {
  return {
     // ominaisuudet + metodit
   }
};

// Käyttö:
const ekaOlio = luoOlio();
const tokaOlio = luoOlio();

Olion luominen konstruktorifunktiolla

Perinteisempi tapa olioiden luomiseksi JavaScriptissä on nk. konstruktorifunktio. Tämä lähestymistapa perustuu samaan syntaksiin kuin funktion luominen, mutta kutsumisen sijaan funktiosta luodaankin ilmentymä komennolla new. 


function Olio() {
    // ominaisuudet + metodit
}

let ekaOlio = new Olio();

Olion luominen ES6:n Class-rakenteella

Vuodesta 2015 alkaen ES6-pohjaisessa JavaScriptissä on voinut hyödyntää perinteisistä olio-ohjelmointikielistä tuttua Class-rakennetta. Tämä mahdollistaa aiemmin esittellyistä menetelmistä poiketen myös periytymisen (super, extends) sekä getter- ja setter-menetelmät, mikä lisää joustavuutta datan hallinnassa ja kapseloinnissa. 


class Olio {
    constructor() {
       // ominaisuudet
    }
	//metodit
}

const ekaOlio = new Olio();

Class-rakenne tukee periytymistä luokkien välillä käyttämällä extends-avainsanaa. Tällöin perivä luokka (aliluokka) saa käyttöönsä kaikki "vanhemman" (pääluokka) ominaisuudet ja menetelmät. Jotta periytyminen toimii kunnolla, on aliluokan konstruktorissa tehtävä aina super-kutsu. 


class Olio {
	constructor() {
	    // ominaisuudet 
	}
	// metodit
}

class AliOlio extends Olio {
	constructor() {
        // Ominaisuudet
	    super();
	}
    // metodit
}

Artikkelin tiedot

Otsikko: Oliopohjaisen ohjelmoinnin (OOP) perusteet JavaScriptissä

Kuvaus: Opi JavaScriptin oliopohjaisen ohjelmoinnin perusteet. Luo olioita, luokkia ja ilmentymiä keskeisten käsitteiden ja käytäntöjen avulla.

Julkaisija: Koulutus- ja konsultointipalvelu KK Mediat

Viimeksi päivitetty: