Johdatus luokkiin ja olioihin JavaScriptissä

Nyt alamme opiskella OOP:ta JavaScriptissä. Tarkastellaanpa esimerkkiä elämästä ja siirrämme sen sitten JavaScriptiin.

Otetaan esimerkiksi auto. Sillä on renkaat, väri, kori tyyppi, moottorin tilavuus ja niin edelleen. Lisäksi kuljettaja voi antaa sille komentoja: aja, pysähdy, käänny oikealle, vasemmalle jne.

Voidaan sanoa, että on olemassa tietty luokka autoja, joilla on yhteisiä ominaisuuksia (kaikilla on renkaat ja kaikille niille voi antaa komentoja).

Tietty, kadulla seisova auto - on tämän luokan edustaja, tai toisin sanoin, olio tästä luokasta. Kaikilla tämän luokan olioilla on ominaisuudet: rengasten lukumäärä, väri, kori tyyppi ja metodit: aja, pysähdy, käänny oikealle, vasemmalle.

Toisin sanoen itse luokka on piirustus, jonka mukaan tehtaalla valmistetaan autoja. Olio on itse auto, joka on valmistettu näiden piirustusten mukaan.

JavaScriptissä luokka luodaan avainsanalla class, jota seuraa luokan nimi. Tehdään luokka Car:

class Car {
	// tässä koodi, eli JavaScript-piirustus autosta
}

Määritellään nyt piirustuksessamme, että mikä tahansa auto, joka luodaan tämän piirustuksen mukaan, tulee olemaan ominaisuus värille ja ominaisuus polttoaineen määrälle.

Tätä varten kirjoitamme luokan sisälle ominaisuuden color ja ominaisuuden fuel:

class Car {
	color; // auton väri
	fuel;  // polttoaineen määrä
}

Tehdään nyt luokkamme metodit. JavaScriptissä metodit muistuttavat tavallisia funktioita, vaikka ne ilmoitetaan ilman avainsanaa function.

Kuten aiemmin mainittiin, automme voi ajaa, se voi kääntyä, se voi pysähtyä. Luodaan vastaavat metodit luokkaamme:

class Car {
	color; // auton väri
	fuel;  // polttoaineen määrä
	
	// Komento aja:
	go() {
		// jotain JavaScript-koodia
	}
	
	// Komento käänny:
	turn() {
		// jotain JavaScript-koodia
	}
	
	// Komento pysähdy:
	stop() {
		// jotain JavaScript-koodia
	}
}

Olemme tehneet automme piirustuksen. Nyt täytyy mennä tehtaalle ja tehdä tämän luokan olio (eli tietty auto).

JavaScriptissä tämä tehdään avainsanalla new, jonka jälkeen kirjoitetaan luokan nimi:

new Car; // käsketään tehdasta valmistamaan auto

Kuitenkin, jos vain luot luokan olion - se ei johda mihinkään (se on kuin esimerkiksi ilmoittaisi taulukon eikä tallentaisi sitä minnekään). Tarvitsemme muuttujan tämän olion tallentamiseksi.

Olkoon tämän muuttujan nimi myCar - tallennetaan siihen luomamme olio:

let myCar = new Car;

Auton luomisen jälkeen voidaan viitata sEN ominaisuuksiin. Niihin viitataan pisteen kautta. Asetetaan olion ominaisuudet:

let myCar = new Car; // käsketään tehdasta valmistamaan auto

myCar.color = 'red'; // maalataan punaiseksi
myCar.fuel = 50;     // tankataan polttoainetta

Valmista, automme on luotu, maalattu ja tankattu. Nyt voimme antaa sille komentoja tämän auton metodien kautta.

Myös metodeihin viitataan pisteen kautta, mutta toisin kuin ominaisuudessa, metodin nimen jälkeen kirjoitetaan pyöreät sulkeet. Komennetaan oliotamme:

myCar.go();
myCar.turn();
myCar.stop();