3. diel - Vlastnosti objektov a konštruktory v JavaScripte

V minulej lekcii, Prvý objektová aplikácie v JavaScripte , sme si napísali svoju prvú objektovú aplikáciu. Už vieme definovať triedy a ich metódy reprezentujúci akcie, ktoré môžu vykonávať. Novú inštanciu vieme následne z triedy vytvoriť pomocou kľúčového slova new. Tiež vieme, že na triedach môžeme definovať vlastnosti, čo sme ešte neskúšali. Práve vlastnostiam objektov sa budeme v dnešnom tutoriálu objektovo orientovaného programovania v JavaScripte venovať.

Vlastnosti

Vytvorme si nový ukážkový program, tentoraz budeme reprezentovať firmy.

Zamyslime sa, čo by naša firma mala obsahovať za vlastnosti. Môžeme jej priradiť názov, sídlo a zoznam zamestnancov. Vytvoríme súbor Firma.js a zatiaľ ho ponecháme ako prázdnu triedu:

class Firma {

}

S triedami budeme opäť pracovať v nejakom ďalšom súboru, môže sa volať zas obsluha.js. Tu si môžeme vytvoriť novú inštanciu našej firmy:

const microsoft = new Firma();

Nezabudnite si súbor Firma.js načítať v index.html. Ďalšie spôsoby importovania súborov si ukážeme ďalej v kurze.

Vlastnosti triedy sú de facto premenné, ktoré budú mať na sebe inštancie danej triedy. Môžeme k nim pristupovať z metód vnútri triedy, bez toho aby sme ich museli odovzdať ako parameter. A možno k nim pristupovať aj zvonku, na konkrétne vytvorené inštanciu.

Definujme našej inštanciu microsoft vlastnosť nazev. K vlastnostiam inštancií pristupujeme cez bodku ., Čo značí, že to čo budeme písať patrí našej inštanciu. Ďalej uvedieme názov našej vlastnosti. Zápis môže vyzerať takto:

microsoft.nazev = "Microsoft Corporation";

Pridajme si tento riadok do obsluha.js a skúsme si našej vlastnosť vypísať na stránku. Teraz by kompletné obsluha.js mohla vyzerať 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

Teraz si stránku skúsme otvoriť v prehliadači:

Ako vidíme, vlastnosť našej inštancie sa vypísala. Takto by sme mohli pokračovať a vytvoriť viac inštancií firiem s rôznymi názvami:

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ýsledok:

Konštruktor

Pretože je naša trieda prázdna, museli by sme vlastnosť nazev takto pridať i pre ďalšie budúce inštancie triedy Firma, aby ju mali všetky. Keď vynecháme fakt, že je to veľa opakujúceho sa kódu, ak by bolo vlastností alebo inštancií viac, mohli by sme na nejakú zabudnúť. To nie je práve praktické. Preto môžeme pre vytvorenie vlastnosti nejaké inštancie použiť špeciálnu metódu priamo v triede, tzv. Konštruktor.

Konštruktor je metóda, ktorá sa automaticky zavolá pri vytváraní novej inštancie triedy. Slúži samozrejme k nastavenie vnútorného stavu objektu a na vykonanie prípadnej inicializácia. Práve v nej môžeme vlastnosti novým inštanciám jednoducho vytvoriť. Skúsime si to na ukážke si firmou.

Konštruktor firmy

V triede budeme potrebovať pristúpiť k jej aktuálnu inštanciu, ktorá sa práve vytvára, a príslušné vlastnosti ju nastaviť. K aktuálnej inštanciu v triede pristúpime pomocou kľúčového slova this, ktoré sa v JavaScripte bohužiaľ chová rôzne, v závislosti od kontextu. K tejto problematike sa v kurze ešte niekoľkokrát vrátime.

Do triedy v súbore Firma.js teda pridajme konštruktor, metódu spúšťajúci sa pri vytváraní nových inštancií, a v nej nastavme pomocou this aktuálne inštanciu všetky vlastnosti firmy, o ktorých sme hovorili v úvode. Konštruktor sa v JavaScripte vždy volá constructor():

class Firma {

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

Názov a sídlo je jasné, ukladáme je v dvoch vlastnostiach ako textový reťazec. Všetky firmy budú mať teraz názov "Název firmy" a sídlo "Praha". Zamestnanca firmy budeme ukladať do poľa, pri vytvorení inštancie ju teda rovno aj pripravíme prázdne pole.

Z obsluha.js teraz odoberieme riadky pridávajúce 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é zavolanie new Firma() zavolá automaticky konštruktor. Keď skript spustíme, dostaneme podobný výpis ako minule:

Parametre konstruktoru

Samozrejme ale nechceme mať u všetkých firiem vo vlastnostiach rovnaké hodnoty. Preto názov a sídlo odovzdáme konštruktory firmy parametrom. Upravíme teda Firma.js:

class Firma {

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

}

Parametre vyplníme pri vytváraní inštancií našej triedy 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);

Teraz už vieme, na čo slúži ony zátvorky za názvom triedy pri vytváraní jej inštancie Pri spustení skriptu už získame rovnaký výpis:

Parametre takto samozrejme môžeme odovzdať akejkoľvek metóde, ako sme to v minulosti robili u funkcií.

Metódy

V rámci tréningu firme pridajme okrem konstruktoru ešte niekoľko klasických metód.

Výpis názvu a sídla

Vytvoríme metódu na napísanie mena našej firmy a jej sídla. Vyskúšame si tak, že k vlastnostiam inštancie môžeme v triede jednoducho pristupovať. Vypisovací metóda v triede Firma, v súbore Firma.js, môže vyzerať napr. Nasledovne:

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

Keď by sme ju zavolali v obsluha.js, takto:

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

Tak by naša stránka mala vyzerať takto:

Vyzerá to, že všetko funguje veľmi dobre

Avšak vráťme sa na chvíľku k našej metóde. Náš spôsob zostavenia textu je trochu nešťastný. Musíme vždy ukončiť textový reťazec a potom pripojiť ďalšie. To môže byť zdrojom chýb a zápis ide samozrejme zjednodušiť. Do textového reťazca môžeme priamo vkladať nejaké hodnoty, bez toho aby sme ho museli akokoľvek ukončovať. Stačí pre zápis reťazca použiť spätné úvodzovky `. Do reťazca potom jednotlivé ukazovatele vkladáme pomocou dolára a zložených zátvoriek ako ${nazevPromenne}.

Elegantnejší verzia našej metódy by mohla vyzerať takto:

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

Keď skript spustíme, uvidíme opäť rovnaký výpis. Tento zápis je však oveľa jednoduchšie a prehľadnejšie.

Výpis zamestnancov

Ďalej do triedy pridáme metódy na vytváranie zamestnancov a na ich výpis.

Keďže budeme pracovať so zamestnancami, vytvoríme si pre nich novú triedu v súbore Zamestnanec.js, rovno aj s konštruktor:

class Zamestnanec {

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

}

Súbor s triedou si nezabudnite opäť naimportovať v index.html:

<script src="js/Zamestnanec.js"></script>

Vytváranie zamestnancov

Pre vytváranie zamestnancov si získame vstup od užívateľa. Keďže s objektmi začíname, vyhneme sa zatiaľ užívateľskému rozhraniu a pre získanie vstupov použijeme funkciu prompt(). Nová metóda triedy Firma bude vyzerať 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 prvých troch riadkoch od užívateľa načítame meno, vek a pracovnú pozíciu nového zamestnanca. Toho ďalej vytvoríme a uložíme ho do premennej zamestnanec. Do poľa ho pridáme pomocou metódy push(). V obsluha.js našu novú metódu zavoláme:

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

Noví zamestnanci sa zatiaľ nikam nevypisujú, poďme to napraviť.

Výpis zamestnancov

Do Firma.js pridáme posledné metódu vypisZamestnance(), ktorá do stránky vypíše HTML zoznam našich zamestnancov. Mohla by vyzerať napr. Nasledovne:

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árame si konštantu seznam, do ktorej vytvárame nový element typu <ul>, teda nečíslovaný zoznam. Následne proiterujeme naše pole zamestnancov foreach cyklom a vlastnosti každého zamestnanca pridáme ako odrážky zoznamu. Nakoniec náš zoznam vložíme do <body>.

Teraz metódu stačí už len zavolať v obsluha.js. Možno ešte môžeme zavolať raz metódu na vytvorenie ďalšieho zamestnanca, aby sme videli, ako bude náš zoznam vyzerať s viacerými zamestnancami:

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

Keď spustíme a vyplníme, naša stránka by mohla vyzerať takto:

To by pre dnešok bolo všetko. Ak vám čokoľvek nefunguje, dole máte k dispozícii odkaz na stiahnutie kompletného projektu, aby ste si mohli nájsť chybu. V budúcej lekcii, Kvíz - Úvod a vlastnosti objektov v JavaScripte , si povieme niečo o odlišnostiach medzi referenčnými dátovými typmi (objekty) a typy hodnotovými (napr. number).

V nasledujúcom kvíze, Kvíz - Úvod a vlastnosti objektov v JavaScripte, si vyskúšame nadobudnuté skúsenosti z predchádzajúcich lekcií.

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.