Úvod do tried a objektov v JavaScripte

Teraz sa budeme venovať štúdiu OOP v JavaScripte. Pozrime sa na príklad zo života, a potom ho prenesieme do JavaScriptu.

Ako príklad si vezmime automobil. Ten má kolesá, farbu, typ karosérie, objem motora a tak ďalej. Okrem toho, vodič mu môže dávať príkazy: ísť, zastaviť sa, odbočiť doprava, doľava atď.

Môžeme povedať, že existuje istý trieda automobilov, ktorá má spoločné vlastnosti (všetky majú kolesá a všetkým je možné dávať príkazy).

Konkrétny automobil stojaci na ulici - je zástupcom tejto triedy, alebo inými slovami, objekt tejto triedy. Všetky objekty tejto triedy majú vlastnosti: počet kolies, farbu, typ karosérie a metódy: ísť, zastaviť sa, odbočiť doprava, doľava.

Inými slovami, samotná trieda je výkres, podľa ktorého sa v továrni vyrábajú automobily. Objekt je samotné auto, vyrobené podľa týchto výkresov.

V JavaScripte sa trieda vytvára pomocou kľúčového slova class, za ktorým nasleduje názov tejto triedy. Vytvorme triedu Car:

javascriptclass Car {
  // tu je kód, teda JavaScriptový výkres automobilu
}

Určme teraz v našom výkrese, že akýkoľvek automobil, vytvorený podľa tohto výkresu, bude mať vlastnosť pre farbu a vlastnosť pre množstvo paliva.

Na to vnútri triedy napíšeme vlastnosť color a vlastnosť fuel:

javascriptclass Car {
  color; // farba automobilu
  fuel;  // množstvo paliva
}

Vytvorme teraz metódy našej triedy. V JavaScripte sú metódy podobné obyčajným funkciám, len deklarujú sa bez kľúčového slova function.

Ako už bolo spomenuté vyššie, náš automobil môže ísť, môže odbočovať, môže zastaviť. Vytvorme zodpovedajúce metódy v našej triede:

javascriptclass Car {
  color; // farba automobilu
  fuel;  // množstvo paliva
  
  // Príkaz ísť:
  go() {
    // nejaký JavaScript kód
  }
  
  // Príkaz odbočiť:
  turn() {
    // nejaký JavaScript kód
  }
  
  // Príkaz zastaviť sa:
  stop() {
    // nejaký JavaScript kód
  }
}

Spravili sme výkres nášho automobilu. Teraz je potrebné ísť do továrne a vyrobiť objekt tejto triedy (teda konkrétny automobil).

V JavaScripte sa to robí pomocou kľúčového slova new, za ktorým sa píše názov triedy:

javascriptnew Car; // prikážeme továrni vyrobiť automobil

Avšak, ak len vytvoríme objekt triedy - nepovedie to k ničomu (je to rovnako, ako keby sme napríklad deklarovali pole a nikam ho nezapísali). Potrebujeme premennú na uchovanie tohto objektu.

Nech sa táto premenná volá myCar - zapíšme do nej vytvorený objekt:

javascriptlet myCar = new Car;

Po vytvorení automobilu je možné pristupovať k jeho vlastnostiam. Prístup k nim prebieha cez bodku. Nastavme vlastnosti nášho objektu:

javascriptlet myCar = new Car; // prikážeme továrni vyrobiť automobil

myCar.color = 'red'; // farbíme na červeno
myCar.fuel = 50;     // natankujeme palivo

Hotovo, náš automobil je vytvorený, nafarbený a natankovaný. Teraz mu môžeme dávať príkazy cez metódy tohto automobilu.

Prístup k metódam tiež prebieha cez bodku, ale na rozdiel od vlastnosti, za názvom metódy nasledujú okrúhle zátvorky. Dávajme príkazy nášmu objektu:

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