Úloha 3 – Porovnání metod new Object(), konstruktor a Object.create()

Úvod do úlohy

Jakmile si studenti osvojí vytváření objektů pomocí objektového literálu, je vhodné ukázat i další možnosti. Tyto alternativní způsoby sice nejsou v praxi pro jednoduché scénáře tak běžné, ale pomáhají pochopit, jak JavaScript s objekty pracuje pod povrchem. Navíc se s nimi můžete setkat ve starších kódech nebo při čtení dokumentace. Důležité je rozlišit, kdy je vhodné použít literál a kdy naopak oceníme konstruktorovou funkci či Object.create().

Teorie a principy

• new Object()

  • Vytváří prázdný objekt pomocí vestavěného konstruktoru.

  • Lze do něj přidávat vlastnosti postupně.

  • Syntaxe je delší a méně přehledná než literál.

• Konstruktorová funkce

  • Definujeme funkci, která nastaví výchozí hodnoty vlastností.

  • Použitím new vytvoříme instanci objektu se stejným „plánem“.

  • Dává smysl, když chceme vytvořit více podobných objektů.

• Object.create()

  • Umožňuje vytvořit nový objekt, který má jako prototyp jiný objekt.

  • Hodí se pro explicitní práci s dědičností prototypů.

  • Je užitečné pochopit, ale pro začátečníky může působit složitě.

• Literál

  • Nejkratší a nejpřehlednější zápis pro běžné případy.

  • Používá se ve většině moderního kódu.

Praktické příklady kódu

Typické chyby / záludnosti

• Zapomenutí klíčového slova new u konstruktorové funkce:

• Nepochopení rozdílu mezi vlastnostmi a prototypem – vlastnosti nastavené přes Object.create() mohou být „zděděné“ z prototypu, a tedy nejsou přímo zapsány v samotném objektu.

• Používání new Object() tam, kde je lepší literál – literál je stručnější a čitelnější.

Shrnutí

• Objekty lze tvořit více způsoby, ale nejpřehlednější je literál.

• new Object() je zastaralejší a zbytečně ukecaný způsob.

• Konstruktorová funkce umožňuje vytvářet více podobných instancí se stejnou strukturou.

• Object.create() je silný nástroj pro práci s prototypovou dědičností.

• V běžné praxi pro jednoduché objekty zůstaňte u literálu, ostatní techniky slouží spíše pro speciální případy nebo hlubší pochopení jazyka.

Úloha

Zadání (kontext úlohy):

Chceš vytvořit malý program, který uchovává informace o uživatelích webu. Úkolem je vyzkoušet si tři různé způsoby tvorby objektů a ukázat, že výsledkem je vždy objekt se stejnými vlastnostmi, ale jiným stylem zápisu.

Cíl úlohy:

Procvičit si práci s objekty vytvořenými různými metodami, naučit se rozdíly mezi nimi a porovnat výsledky výpisem do stránky.

Vstupní podmínky:

• Student pracuje se soubory index.html a script.js.

• Do stránky bude vypisovat pomocí document.write().

Požadovaný výstup:

1. Pomocí new Object() vytvoř objekt uzivatel1, přidej mu vlastnosti jmeno, vek a email.

2. Napiš konstruktorovou funkci Uzivatel, která nastaví vlastnosti jmeno, vek a email. Pomocí new vytvoř instanci uzivatel2.

3. Pomocí Object.create() vytvoř objekt uzivatel3, který zdědí vlastnost role: "návštěvník" z prototypu. Doplň mu vlastní vlastnosti jmeno a vek.

4. Vypiš do stránky vlastnosti všech tří uživatelů v přehledném formátu (každý uživatel na samostatném řádku).

5. Přidej do uzivatel2 novou vlastnost (např. aktivni: true) a také ji vypiš.

6. Vytvoř krátké shrnutí do stránky: kolik různých metod jsi použil a v čem se liší.

Doplňující pokyny:

• Používej const pro deklaraci objektů.

• Konstruktorovou funkci piš klasicky pomocí function.

• Nezapomeň, že u konstruktorové funkce musíš použít new.

• Vypisy odděl pomocí <br>.

Řešení úlohy

Co je zde splněno

• Vytvoření uzivatel1 pomocí new Object().

• Vytvoření uzivatel2 pomocí konstruktorové funkce a new.

• Přidání nové vlastnosti aktivni k uzivatel2.

• Vytvoření uzivatel3 pomocí Object.create() a doplnění vlastností.

• Přehledný výpis všech uživatelů.

• Shrnutí rozdílů mezi jednotlivými metodami.