Ú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:

javascriptclass 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:

javascriptclass 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ě:

javascriptclass 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:

javascriptnew 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:

javascriptlet 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:

javascriptlet 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:

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