Lekce 3 - Vlastnosti objektů a konstruktory v JavaScriptu

V minulé lekci, První objektová aplikace v JavaScriptu, jsme si napsali svou první objektovou aplikaci.

Již umíme definovat třídy a jejich metody reprezentující akce, které mohou vykonávat. Novou instanci umíme následně z třídy vytvořit pomocí klíčového slova new. Také víme, že na třídách můžeme definovat vlastnosti, což jsme ještě nezkoušeli. Právě vlastnostem objektů se budeme v dnešním tutoriálu objektově orientovaného programování v JavaScriptu věnovat.

Vlastnosti

Vytvořme si nový ukázkový program, tentokrát budeme reprezentovat firmy.

Zamysleme se, co by naše firma měla obsahovat za vlastnosti. Můžeme jí přiřadit název, sídlo a seznam zaměstnanců. Vytvoříme soubor Firma.js a zatím jej ponecháme jako prázdnou třídu:

class Firma {

}

S třídami budeme opět pracovat v nějakém dalším souboru. Vytvoříme si tedy soubor, který se bude jmenovat obsluha.js. Do něj si můžeme vytvořit novou instanci naší firmy:

const microsoft = new Firma();

Nezapomeňte si soubor Firma.js načíst v index.html. Další způsoby importování souborů si ukážeme dále v kurzu.

Vlastnosti třídy jsou de facto proměnné, které budou mít na sobě instance dané třídy. Můžeme k nim přistupovat z metod uvnitř třídy, aniž bychom je museli předat jako parametr. A lze k nim přistupovat i zvenčí, na konkrétní vytvořené instanci.

Definujme naší instanci microsoft vlastnost nazev. K vlastnostem instancí přistupujeme přes tečku ., což značí, že to co budeme psát patří naší instanci. Dále uvedeme název naší vlastnosti. Zápis může vypadat takto:

microsoft.nazev = "Microsoft Corporation";

Přidejme si tento řádek do obsluha.js a zkusme si naší vlastnost vypsat na stránku. Nyní by kompletní obsluha.js mohla vypadat takto:

const microsoft = new Firma();
microsoft.nazev = "Microsoft Corporation"; // Přidáme naší firmě vlastnost název s nějakou hodnotou
document.write(microsoft.nazev); // Vypíšeme název na stránku

Nyní si stránku zkusme otevřít v prohlížeči:

Jak vidíme, vlastnost naší instance se vypsala. Takto bychom mohli pokračovat a vytvořit více instancí firem s různými názvy:

const microsoft = new Firma();
microsoft.nazev = "Microsoft Corporation";
const google = new Firma();
google.nazev = "Google LLC";
document.write(microsoft.nazev); // Vypíšeme názvy firem
document.write('<br />');
document.write(google.nazev);

Výsledek:

Konstruktor

Protože je naše třída prázdná, museli bychom vlastnost nazev takto přidat i pro další budoucí instance třídy Firma, aby ji měly všechny. Když opomineme fakt, že je to hodně opakujícího se kódu, pokud by bylo vlastností či instancí více, mohli bychom na nějakou zapomenout. To není zrovna praktické. Proto můžeme pro vytvoření vlastnosti nějaké instance použít speciální metodu přímo ve třídě, tzv. konstruktor.

Konstruktor je metoda, která se automaticky zavolá při vytváření nové instance třídy. Slouží samozřejmě k nastavení vnitřního stavu objektu a k provedení případné inicializace. Právě v ní můžeme vlastnosti novým instancím jednoduše vytvořit. Zkusíme si to na ukázce s firmou.

Konstruktor firmy

Ve třídě budeme potřebovat přistoupit k její aktuální instanci, která se zrovna vytváří, a příslušné vlastnosti ji nastavit. K aktuální instanci ve třídě přistoupíme pomocí klíčového slova this, které se v JavaScriptu bohužel chová různě, v závislosti na kontextu. K této problematice se v kurzu ještě několikrát vrátíme.

Do třídy v souboru Firma.js tedy přidejme konstruktor, metodu spouštějící se při vytváření nových instancí, a v ní nastavme pomocí this aktuální instanci všechny vlastnosti firmy, o kterých jsme mluvili v úvodu. Konstruktor se v JavaScriptu vždy jmenuje constructor():

class Firma {

    constructor() {
        this.nazev = "Název firmy";
        this.sidlo = "Praha";
        this.zamestnanci = [];
    }
}

Název a sídlo je jasné, ukládáme je ve dvou vlastnostech jako textový řetězec. Všechny firmy budou mít nyní název "Název firmy" a sídlo "Praha". Zaměstnance firmy budeme ukládat do pole, při vytvoření instance ji tedy rovnou i připravíme prázdné pole.

Z obsluha.js nyní odebereme řádky přidávající jednotlivým firmám vlastnosti:

const microsoft = new Firma();
const google = new Firma();
document.write(microsoft.nazev); // Vypíšeme názvy firem
document.write('<br />');
document.write(google.nazev);

Každé zavolání new Firma() zavolá automaticky konstruktor. Když skript spustíme, dostaneme podobný výpis jako minule:

Parametry konstruktoru

Samozřejmě ale nechceme mít u všech firem ve vlastnostech stejné hodnoty. Proto název a sídlo předáme konstruktoru firmy parametrem. Upravíme tedy Firma.js:

class Firma {

    constructor(nazev, sidlo) {
        this.nazev = nazev;
        this.sidlo = sidlo;
        this.zamestnanci = [];
    }

}

Parametry vyplníme při vytváření instancí naší třídy v obsluha.js:

const microsoft = new Firma("Microsoft Corporation", "Redmont, Washington");
const google = new Firma("Google LLC", "Mountain View, California");
document.write(microsoft.nazev); // Vypíšeme názvy firem
document.write('<br />');
document.write(google.nazev);

Nyní již víme, k čemu slouží ony závorky za názvem třídy při vytváření její instance Při spuštění skriptu již získáme stejný výpis:

Parametry takto samozřejmě můžeme předat jakékoli metodě, jako jsme to v minulosti dělali u funkcí.

Metody

V rámci tréningu firmě přidejme kromě konstruktoru ještě několik klasických metod.

Výpis názvu a sídla

Vytvoříme metodu na vypsání jména naší firmy a jejího sídla. Vyzkoušíme si tak, že k vlastnostem instance můžeme ve třídě jednoduše přistupovat. Vypisovací metoda ve třídě Firma, v souboru Firma.js, může vypadat např. takto:

vypisInfoOFirme() {
    document.write("Firma " + this.nazev + " sídlí v " + this.sidlo);
}

Když bychom ji zavolali v obsluha.js, takto:

const microsoft = new Firma("Microsoft Corporation", "Redmont, Washington");
microsoft.vypisInfoOFirme(); // Vypíšeme na stránku

Tak by naše stránka měla vypadat takto:

Vypadá to, že vše funguje velmi dobře

Ovšem vraťme se na chvilku k naší metodě. Náš způsob sestavení textu je poněkud nešťastný. Musíme vždy ukončit textový řetězec a poté připojit další. To může být zdrojem chyb a zápis jde samozřejmě zjednodušit. Do textového řetězce můžeme přímo vkládat nějaké hodnoty, aniž bychom ho museli jakkoli ukončovat. Stačí pro zápis řetězce použít zpětné uvozovky `. Do řetězce pak jednotlivé proměnné vkládáme pomocí dolaru a složených závorek jako ${nazevPromenne}.

Elegantnější verze naší metody by mohla vypadat takto:

vypisInfoOFirme() {
    document.write(`Firma ${this.nazev} sídlí v ${this.sidlo}`);
}

Když skript spustíme, uvidíme opět stejný výpis. Tento zápis je ovšem mnohem snazší a přehlednější.

Výpis zaměstnanců

Dále do třídy přidáme metody na vytváření zaměstnanců a na jejich výpis.

Jelikož budeme pracovat se zaměstnanci, vytvoříme si pro ně novou třídu v souboru Zamestnanec.js, rovnou i s konstruktorem:

class Zamestnanec {

    constructor(jmeno, vek, pozice) {
        this.jmeno = jmeno;
        this.vek = vek;
        this.pozice = pozice;
    }

}

Soubor s třídou si nezapomeňte opět naimportovat v index.html v tomto pořadí:

<body>
    <script src="js/Firma.js"></script>
    <script src="js/Zamestnanec.js"></script>
    <script src="js/obsluha.js"></script>
</body>

Vytváření zaměstnanců

Pro vytváření zaměstnanců si získáme vstup od uživatele. Jelikož s objekty začínáme, vyhneme se zatím uživatelskému rozhraní a pro získání vstupů použijeme funkci prompt(). Nová metoda třídy Firma bude vypadat takto:

pridejZamestnance() {
    const jmeno = prompt("Zadej jméno zaměstnance");
    const vek = prompt("Zadej věk");
    const pozice = prompt("Zadej pracovní pozici");
    const zamestnanec = new Zamestnanec(jmeno, vek, pozice);
    this.zamestnanci.push(zamestnanec); // Přidáme nového zaměstnance do pole
}

Na prvních třech řádcích od uživatele načteme jméno, věk a pracovní pozici nového zaměstnance. Toho dále vytvoříme a uložíme jej do proměnné zamestnanec. Do pole jej přidáme pomocí metody push(). V obsluha.js naši novou metodu zavoláme:

const microsoft = new Firma("Microsoft Corporation", "Redmont, Washington");
microsoft.vypisInfoOFirme();
microsoft.pridejZamestnance();

Noví zaměstnanci se zatím nikam nevypisují, pojďme to napravit.

Výpis zaměstnanců

Do Firma.js přidáme poslední metodu vypisZamestnance(), která do stránky vypíše HTML seznam našich zaměstnanců. Mohla by vypadat např. takto:

vypisZamestnance() {
    document.write("<h3>Zaměstnanci</h3>");
    const seznam = document.createElement("ul"); // Vytvoříme seznam jako HTML element
    for (const zamestnanec of this.zamestnanci) { // Naplníme jej daty
        seznam.innerHTML += `<li><strong>Jméno</strong>: ${zamestnanec.jmeno}</li>`;
        seznam.innerHTML += `<li><strong>Věk</strong>: ${zamestnanec.vek}</li>`;
        seznam.innerHTML += `<li><strong>Pozice</strong>: ${zamestnanec.pozice}</li><br>`;
    }
    document.body.appendChild(seznam); // Přiřadíme element do body
}

Vytváříme si konstantu seznam, do které vytváříme nový element typu <ul>, tedy nečíslovaný seznam. Následně proiterujeme naše pole zaměstnanců foreach cyklem a vlastnosti každého zaměstnance přidáme jako odrážky seznamu. Nakonec náš seznam vložíme do <body>.

Nyní metodu stačí již jen zavolat v obsluha.js. Možná ještě můžeme zavolat jednou metodu na vytvoření dalšího zaměstnance, abychom viděli, jak bude náš seznam vypadat s více zaměstnanci:

const microsoft = new Firma("Microsoft Corporation", "Redmont, Washington");
microsoft.vypisInfoOFirme();
microsoft.pridejZamestnance();
microsoft.pridejZamestnance();
microsoft.vypisZamestnance();

Když spustíme a vyplníme, naše stránka by mohla vypadat takto:

To by pro dnešek bylo vše. Pokud vám cokoli nefunguje, dole máte k dispozici odkaz ke stažení kompletního projektu, abyste si mohli najít chybu.

V následujícím cvičení, Řešené úlohy k 1.-3. lekci OOP v JavaScriptu, si procvičíme nabyté zkušenosti z předchozích lekcí.

 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.