Bevezetés az osztályokba és objektumokba JavaScriptben

Most az OOP tanulmányozásával fogunk foglalkozni JavaScriptben. Vegyünk egy példát a mindennapi életből, majd vigyük át JavaScriptbe.

Példaként vegyünk egy autót. Annak vannak kerekei, színe, karosszéria típusa, motor űrtartalma és így tovább. Ezen kívül a sofőr parancsokat adhat neki: menj, állj meg, fordulj jobbra, balra stb.

Azt mondhatjuk, hogy létezik egy bizonyos osztály az autóknak, amely közös tulajdonságokkal rendelkezik (mindannyian vannak kerekeik és mindannyiuknak adhatunk parancsokat).

Egy konkrét autó, ami az utcán áll - ennek az osztálynak egy képviselője, vagy más szavakkal, egy objektum ebből az osztályból. Ennek az osztálynak minden objektumának vannak tulajdonságai: kerekek száma, szín, karosszéria típus és metódusai: menni, megállni, jobbra fordulni, balra.

Más szavakkal, maga az osztály - ez a tervrajz, amely alapján a gyárban autókat készítenek. Az objektum pedig maga az autó, amely ezek szerint a tervek szerint készül.

JavaScriptben egy osztály a class kulcsszóval jön létre, amelyet az osztály neve követ. Készítsük el a Car osztályt:

class Car {
	// itt a kód, azaz a JavaScript-tervrajz az autóhoz
}

Határozzuk meg most a tervünkben, hogy bármely autó, amely e terv szerint készül, lesz egy szín tulajdonsága és egy üzemanyag-mennyiség tulajdonsága.

Ehhez írjuk be az osztályon belül a color tulajdonságot és a fuel tulajdonságot:

class Car {
	color; // az autó színe
	fuel;  // üzemanyag mennyisége
}

Készítsük most el az osztályunk metódusait. JavaScriptben a metódusok hasonlóak a szokásos függvényekhez, csak a function kulcsszó nélkül deklaráljuk őket.

Ahogy fentebb már említettük, az autónk tud menni, tud kanyarodni, tud megállni. Készítsük el a megfelelő metódusokat az osztályunkban:

class Car {
	color; // az autó színe
	fuel;  // üzemanyag mennyisége
	
	// A menni parancs:
	go() {
		// valamilyen JavaScript kód
	}
	
	// A kanyarodni parancs:
	turn() {
		// valamilyen JavaScript kód
	}
	
	// A megállni parancs:
	stop() {
		// valamilyen JavaScript kód
	}
}

Megcsináltuk az autónk tervrajzát. Most el kell mennünk a gyárba és elkészíteni ennek az osztálynak egy objektumát (azaz egy konkrét autót).

JavaScriptben ezt a new kulcsszóval tesszük, amelyet az osztály neve követ:

new Car; // parancsot adunk a gyárnak, hogy készítsen autót

Azonban, ha csak létrehozunk egy osztályobjektumot - az nem vezet semmire (ez olyan, mintha például deklarálunk egy tömböt és nem írjuk sehova). Szükségünk van egy változóra ennek az objektumnak a tárolására.

Legyen ennek a változónak a neve myCar - írjuk bele a létrehozott objektumunkat:

let myCar = new Car;

Az autó létrehozása után hozzá lehet nyúlni a tulajdonságaihoz. A hozzáférés egy ponton keresztül történik. Állítsuk be objektumunk tulajdonságait:

let myCar = new Car; // parancsot adunk a gyárnak, hogy készítsen autót

myCar.color = 'red'; // pirosra festjük
myCar.fuel = 50;     // üzemanyagot tankolunk

Kész, az autónk létrejött, befestettük és megtankoltuk. Most parancsokat adhatunk neki az autó metódusain keresztül.

A metódusokhoz való hozzáférés szintén egy ponton keresztül történik, de a tulajdonságtól eltérően, a metódus neve után kerek zárójeleket kell írni. Parancsoljunk az objektumunknak:

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