Lekce 4 - Implementace metod v JavaScriptu Nové

V minulé lekci, Vlastnosti objektů a konstruktory v JavaScriptu, jsme si vytvořili svůj první pořádný objekt, kterým byla firma.

V tomto tutoriálu objektově orientovaného programování v JavaScriptu se budeme věnovat tvoření vlastních metod. Již umíme definovat vlastnosti i vytvářet konstruktory pro inicializaci těchto vlastností na počáteční hodnoty. Pro větší interaktivitu pojďme naši třídu Firma rozšířit o několik klasických metod i překrytou metodu toString() a následně přidat do firmy zaměstnance.

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. Do třídy Firma přidáme vypisovací metodu vypisInfoOFirme(). Nová podoba třídy může být následující:

class Firma {
    nazev;
    sidlo;
    zamestnanci = [];

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

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

}

Soubor obsluha.js upravíme a metodu v něm zavoláme. Soubor nyní vypadá takto:

'use strict';

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

Naše stránka pak bude vypadat takto:

Tvoje stránka

localhost

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

Pokud však chceme v JavaScriptu získat textovou reprezentaci objektu, tedy jeho textový výpis, obvykle k tomu takto vlastní metodu nevytváříme. Použijeme k tomu totiž již existující metodu toString(). Rovněž 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. Použijme místo toho radši jiný způsob vkládání hodnot proměnných do řetězců, a to pomocí interpolace řetězce, se kterým jsme se obeznámili v lekci Textové řetězce v JavaScriptu.

Přepsání metody `toString()`

Metodu toString() automaticky obsahuje každý objekt, tedy i naše instance firmy. Zkusme si schválně v souboru obsluha.js vypsat hodnotu, kterou nám tato metoda na firmě vrátí:

const microsoft = new Firma("Microsoft Corporation", "Redmont, Washington");
document.body.innerHTML += microsoft.toString();

Výsledek:

Tvoje stránka

localhost

Vidíme, že výchozí textovou reprezentací objektu v JavaScriptu je nicneříkající řetězec [object Object]. V naší třídě Firma si však můžeme vytvořit vlastní implementaci metody toString(), takzvaně ji přepsat (někdy se také říká překrýt), a vracet v ní smysluplnější reprezentaci firmy.

K přepisování metod se ještě jednou vrátíme v lekci Dědičnost a polymorfismus.

Odeberme tedy naši metodu vypisInfoOFirme() a nahraďme ji metodou toString(). Využijme zároveň i interpolaci řetězce pro sestavení textové reprezentace firmy:

toString() {
    return `Firma ${this.nazev} sídlí v ${this.sidlo}`;
}

Když si zobrazíme naši stránku, uvidíme opět očekávaný výpis:

Tvoje stránka

localhost

Hlavní výhodou nyní je, že v souboru obsluha.js metodu toString() dokonce ani nemusíme vůbec volat. Operátoru += stačí předat přímo náš objekt, na němž si operátor metodu toString() zavolá sám:

const microsoft = new Firma("Microsoft Corporation", "Redmont, Washington");
document.body.innerHTML += microsoft;

Nikdy bychom si neměli dělat vlastní metodu, například něco jako náš vypisInfoOFirme(), když máme v JavaScriptu připravenou cestu, jak toto řešit.

Správa 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 Zamestnanec v souboru js/Zamestnanec.js, rovnou i s konstruktorem a atributy:

class Zamestnanec {
    jmeno;
    vek;
    pozice;

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

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

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

Vytváření zaměstnanců

Pro vytváření zaměstnanců budeme potřebovat získat vstup od uživatele. Jelikož s objekty začínáme, vyhneme se zatím složitému uživatelskému rozhraní (částem aplikace, které interagují s uživatelem pro získání vstupů jako jsou tlačítka, menu, vizuální prvky a další) a použijeme funkci prompt(), která nám pro náš příklad bude stačit.

Nevýhodou dialogového okna prompt() je, že umožňuje zadání pouze jedné hodnoty a nenabízí možnost přizpůsobení. Uživatelsky přívětivějším řešením by bylo si vytvořit vlastní dialogové okno s plnohodnotným formulářem. To je však nad rámec této lekce.

Nová metoda pridejZamestnance() 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čítáme jméno, věk a pracovní pozici nového zaměstnance. Toho dále vytváříme a ukládáme jej do proměnné zamestnanec. Do pole zamestnanci jej přidáváme pomocí metody push().

V souboru obsluha.js naši novou metodu pridejZamestnance() zavoláme:

const microsoft = new Firma("Microsoft Corporation", "Redmont, Washington");
document.body.innerHTML += microsoft;

microsoft.pridejZamestnance();

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

Výpis zaměstnanců

Do třídy Firma přidáme poslední metodu vypisZamestnance(), která do stránky vypíše HTML seznam našich zaměstnanců. Vypadat bude takto:

vypisZamestnance() {
    document.body.innerHTML += "<h2>Zaměstnanci</h2>";
    const seznam = document.createElement("ul");

    for (const zamestnanec of this.zamestnanci) {
        seznam.innerHTML += `
            <li>
                <h3>${zamestnanec.jmeno}</h3>
                <dl>
                    <dt>Věk:</dt>
                    <dd>${zamestnanec.vek}</dd>
                    <dt>Pozice:</dt>
                    <dd>${zamestnanec.pozice}</dd>
                </dl>
            </li>`;
    }

    document.body.appendChild(seznam);
}

Nejprve na stránku vypisujeme nadpis Zaměstnanci. Následně sestavujeme samotný seznam jako element typu <ul>, tedy nečíslovaný seznam. Procházíme naše pole zaměstnanců cyklem a informace každého zaměstnance vkládáme jako odrážky do seznamu. Jméno zaměstnance vypisujeme do nadpisu a zbylé vlastnosti do seznamu typu <dl> (Definition List), který se skvěle hodí pro zobrazení dat tvaru klíč-hodnota. Nakonec náš nečíslovaný seznam vkládáme do elementu <body>.

Nyní již stačí metodu vypisZamestnance() zavolat v souboru obsluha.js. Ještě můžeme zavolat podruhé 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");
document.body.innerHTML += microsoft;

microsoft.pridejZamestnance();
microsoft.pridejZamestnance();

microsoft.vypisZamestnance();

Když si naši stránku zobrazíme v prohlížeči a vyplníme informace o zaměstnancích, bude stránka vypadat takto:

Tvoje stránka

localhost

V následujícím cvičení, Řešené úlohy k 1.-4. 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š.

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 0x (3.22 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

Článek pro vás napsal Šimon Raichl

Uživatelské hodnocení:

Ještě nikdo nehodnotil, buď první!

Autor se věnuje především vývoji v JavaScriptu

Aktivity

Nejčastěji vyhledáváné

Lekce 4 - Implementace metod v JavaScriptu Nové

Výpis názvu a sídla

Přepsání metody toString()

Správa zaměstnanců

Vytváření zaměstnanců

Výpis zaměstnanců

Stáhnout

Přepsání metody `toString()`