JavaScript sa v priebehu rokov výrazne vyvinul. Najmä s príchodom ES6 sa programovanie s klasami značně uľahčilo. Starý spôsob vytvárania tried prostredníctvom prototypov a konštruktorových funkcií bol často obtiažny a náchylný na chyby. V tomto návode sa dozvieš, ako efektívne využiť novú syntaxu tried a aké rozdiely existujú medzi starým a novým zápisom. Okrem toho sa naučíš, ako môžeš prostredníctvom dedičnosti rozšíriť svoju štruktúru tried.
Najdôležitejšie poznatky
- Nová syntaktická forma tried umožňuje prehľadnejšie a kompaktnejšie definície.
- Používanie konštruktorov je jednoduchšie a nevyžaduje žiadne samostatné prototypy.
- Funkcionalita za syntaktickou formou tried zostáva založená na prototypoch.
Návod krok za krokom
1. Pochopenie starého zápisu
Aby sme pochopili výhody novej syntaxy tried, najprv sa pozrime na starú metódu. V tomto prípade bola vytvorená konštruktorová funkcia a metódy boli pridané prostredníctvom prototypu.
Aby si vytvoril nový objekt, použiješ new Shape(1, 100, 200). Potom môžeš objekt shape využiť na získanie vlastností.
2. Zobrazenie hodnôt
Aby sme zabezpečili, že naša inštancia objektu funguje správne, vypíšeme vlastnosti x a y.
3. Zavedenie novej syntaxy tried
Teraz prejdeme na novú syntaxu tried, ktorá je dostupná od ES6.
Úpravy sú výrazné: už nepotrebuješ samostatný prototyp. Namiesto toho definuješ všetky metódy v rámci triedy samotnej.
4. Vytváranie objektov s novou triedou
Vytvorenie objektu s novou syntaxou prebieha rovnako ako predtým. Používaš new na vytvorenie inštancie triedy Shape.
5. Využitie novej triedy
Používanie novej definovanej triedy je identické so starou metódou. Môžeš využiť inštanciu shape1 na získanie hodnôt a použitie metódy move.
6. Dedičnosť v triedach
Ďalšou výhodou syntaxy tried je možnosť dedičnosti. Ak chceš vytvoriť novú triedu, ktorá dedí od existujúcej triedy, môžeš použiť kľúčové slovo extends.
V tomto prípade konštruktor potomkovej triedy super() volá konštruktor rodičovskej triedy. To ti umožňuje využiť vlastnosti Shape a zároveň definovať jedinečné vlastnosti pre Rectangle.
7. Zhrnutie deklarácie triedy
Syntaktická forma triedy nielenže zlepšuje prehľadnosť tvojho kódu, ale umožňuje aj lepšiu štruktúru pri práci s objektovo orientovanými konceptmi. Môžeš nielen vytvárať triedy, ale aj budovať komplexné hierarchie dedičnosti, čo robí tvoj kód flexibilnejším a jednoduchším na údržbu.
Zhrnutie – Nová syntaktická forma tried v JavaScripte: ES6 až ES13
V tomto návode si sa naučil, ako efektívne využiť novú syntaxu tried v JavaScripte od ES6 po ES13. Starý spôsob tvorených tried bol často namáhavý a náchylný na chyby, zatiaľ čo nová syntaxa umožňuje jasnú a jednoduchú štruktúru. Okrem toho si sa zoznámil so základmi dedičnosti prostredníctvom syntaxe extends, aby si mohol ešte viac rozšíriť svoje triedy.
Často kladené otázky
Akoý je rozdiel medzi starou a novou syntaxou tried?Starý spôsob používa konštruktorové funkcie a prototypy, zatiaľ čo nová syntaxa zjednodušuje definíciu a používanie tried.
Prečo by som mal používať novú syntaxu tried?Poskytuje prehľadnejší, kompaktnejší a intuitívnejší spôsob definovania tried, čo zlepšuje údržbu a čitateľnosť kódu.
Akým spôsobom funguje dedičnosť s syntaxou tried?Tvá trieda môže prevziať funkcionality inej triedy prostredníctvom kľúčového slova extends, pričom voláš konštruktor rodičovskej triedy pomocou super().
