Úvod do tříd a objektů v JavaScriptu

Nyní se budeme zabývat studiem OOP v JavaScriptu. Pojďme se podívat na příklad ze života, a pak jej přeneseme do JavaScriptu.

Jako příklad vezmeme automobil. Ten má kola, barvu, typ karoserie, objem motoru a tak dále. Kromě toho jej může řidič ovládat: jet, zastavit, zatočit doprava, doleva atd.

Lze říci, že existuje určitá třída automobilů, která má společné vlastnosti (všechny mají kola a všechny lze ovládat).

Konkrétní automobil stojící na ulici - to je zástupce této třídy, nebo jinými slovy, objekt této třídy. Všechny objekty této třídy mají vlastnosti: počet kol, barvu, typ karoserie a metody: jet, zastavit se, zatočit doprava, doleva.

Jinými slovy, samotná třída je výkres, podle kterého se v továrně vyrábějí automobily. Objekt pak je samotné auto, vyrobené podle těchto výkresů.

V JavaScriptu se třída vytváří pomocí klíčového slova class, za kterým následuje název této třídy. Pojďme vytvořit třídu Car:

class Car {
	// zde kód, tedy JavaScriptový výkres automobilu
}

Pojďme nyní v našem výkresu určit, že jakékoli auto vytvořené podle tohoto výkresu bude mít vlastnost pro barvu a vlastnost pro množství paliva.

K tomu uvnitř třídy napíšeme vlastnost color a vlastnost fuel:

class Car {
	color; // barva automobilu
	fuel;  // množství paliva
}

Pojďme nyní vytvořit metody naší třídy. V JavaScriptu jsou metody podobné obyčejným funkcím, ale deklarují se bez klíčového slova function.

Jak již bylo zmíněno výše, naše auto může jet, může zatáčet, může zastavovat. Vytvořme odpovídající metody v naší třídě:

class Car {
	color; // barva automobilu
	fuel;  // množství paliva
	
	// Příkaz jet:
	go() {
		// nějaký JavaScript kód
	}
	
	// Příkaz zatáčet:
	turn() {
		// nějaký JavaScript kód
	}
	
	// Příkaz zastavit:
	stop() {
		// nějaký JavaScript kód
	}
}

Vytvořili jsme výkres našeho automobilu. Nyní je třeba jít do továrny a vyrobit objekt této třídy (tedy konkrétní automobil).

V JavaScriptu se to dělá pomocí klíčového slova new, za kterým se píše jméno třídy:

new Car; // přikážeme továrně vyrobit automobil

Avšak, pokud pouze vytvoříme objekt třídy - k ničemu to nepovede (je to stejné, jako kdybychom například deklarovali pole a nikam jej nezapsali). Potřebujeme proměnnou pro ukládání tohoto objektu.

Nechť se tato proměnná jmenuje myCar - zapišme do ní vytvořený objekt:

let myCar = new Car;

Po vytvoření automobilu lze přistupovat k jeho vlastnostem. Přístup k nim probíhá pomocí tečky. Pojďme nastavit vlastnosti našeho objektu:

let myCar = new Car; // přikážeme továrně vyrobit automobil

myCar.color = 'red'; // natřeme na červeno
myCar.fuel = 50;     // natankujeme palivo

Hotovo, náš automobil je vytvořen, natřen a natankován. Nyní mu můžeme dávat příkazy prostřednictvím metod tohoto automobilu.

Přístup k metodám také probíhá prostřednictvím tečky, ale na rozdíl od vlastnosti se za názvem metody píší kulaté závorky. Pojďme ovládat náš objekt:

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