Lekce 3 - Vlastnosti objektů a konstruktory v JavaScriptu

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

V tomto tutoriálu objektově orientovaného programování v JavaScriptu se budeme věnovat vlastnostem. 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ě vlastnosti si tedy dnes objasníme.

Vlastnosti v JavaScriptu

Vytvořme si nový ukázkový program, tentokrát budeme reprezentovat firmy. Zamysleme se, co by naše firmy měly obsahovat za vlastnosti. Každé firmě přiřadíme název, sídlo a seznam zaměstnanců.

Ve složce js/ vytvoříme soubor Firma.js. Zatím si do něj přidáme pouze prázdnou třídu Firma:

class Firma {

}

S třídami budeme opět pracovat v nějakém dalším souboru. Ve složce js/ si tedy vytvoříme soubor, který se bude jmenovat obsluha.js. Pokud už takový soubor máme, tak ho buď smažeme nebo přejmenujeme. V souboru obsluha.js si vytvoříme novou instanci naší firmy a uložíme si ji do proměnné microsoft:

const microsoft = new Firma();

Nezapomeňme si soubory Firma.js a obsluha.js načíst v tomto pořadí v souboru index.html:

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

Pokud bychom načetli skript pro obsluhu před skriptem, který definuje třídu, došlo by k chybě. Skript pro obsluhu by se totiž pokoušel odkázat na třídu, která ještě nebyla definována.

Další způsoby importování souborů si ukážeme dále v kurzu.

Definice vlastností

Vlastnosti třídy jsou de facto proměnné, které tvoří stav objektu (instance). Každá instance má své vlastní hodnoty těchto vlastností. Lze k nim přistupovat jak z metod uvnitř třídy, tak i zvenčí přes konkrétní instanci.

Definujme naší instanci microsoft vlastnost nazev. K vlastnostem instancí přistupujeme přes tečku .. To značí, že co budeme psát za tečku, patří naší instanci. Dále uvedeme název naší vlastnosti následovaný přiřazením hodnoty pomocí rovnítka =. Zápis vypadá takto:

microsoft.nazev = "Microsoft Corporation";

Přidejme si tento řádek do obsluha.js a zkusme si obsah naší vlastnosti vypsat na stránku. Kompletní soubor obsluha.js vypadá takto:

const microsoft = new Firma();
microsoft.nazev = "Microsoft Corporation";

document.body.innerHTML += microsoft.nazev;

Otevřeme si nyní naši stránku v prohlížeči:

Tvoje stránka

localhost

Jak vidíme, vlastnost naší instance se vypsala. Stejným způsobem můžeme hodnotu již existující vlastnosti i měnit:

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

microsoft.nazev = "Microsoft";
document.body.innerHTML += "<br />";
document.body.innerHTML += microsoft.nazev;

Výsledek:

Tvoje stránka

localhost

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.body.innerHTML += microsoft.nazev;
document.body.innerHTML += "<br />";
document.body.innerHTML += google.nazev;

Výsledek:

Tvoje stránka

localhost

Konstruktor

U všech nově vytvořených instancí firem samozřejmě nechceme mít ve vlastnostech stejné hodnoty. Konkrétní název a sídlo firmy budeme chtít určit hned při vytváření instance. Pomůže nám s tím tzv. konstruktor.

Konstruktor je speciální metoda, která se automaticky zavolá při vytváření nové instance třídy. Slouží k nastavení vnitřního stavu objektu a k provedení případné inicializace.

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.

Klíčové slovo this se v JavaScriptu bohužel chová různě, v závislosti na kontextu. Je důležité si uvědomit, kde a jak se this používá, aby bylo možné správně určit, na co se odkazuje. K této problematice se v kurzu ještě několikrát vrátíme.

Do třídy Firma si tedy přidáme konstruktor, tedy metodu spouštějící se při vytváření nových instancí. Konstruktor se v JavaScriptu vždy jmenuje constructor():

class Firma {

    constructor() {

    }
}

Inicializaci našich vlastností můžeme klidně přesunout do konstruktoru. Zkusme si to na vlastnostech nazev a sidlo:

class Firma {

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

Vidíme, že k vlastnostem aktuální instance přistupujeme pomocí klíčového slova this.

Odeberme ze souboru obsluha.js řádky přiřazující jednotlivým firmám vlastnosti:

const microsoft = new Firma();
const google = new Firma();

document.body.innerHTML += microsoft.nazev;
document.body.innerHTML += "<br />";
document.body.innerHTML += google.nazev;

Když si nyní zobrazíme naši stránku, dostaneme výsledek:

Tvoje stránka

localhost

Parametry konstruktoru

Jak již bylo řečeno, nechceme mít u všech firem stejný výchozí název a sídlo. Proto název a sídlo předáme konstruktoru firmy přes jeho parametry. Hodnoty z parametrů následně přiřadíme vlastnostem nazev a sidlo (pomocí zápisu this.nazev resp. this.sidlo):

class Firma {

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

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

const microsoft = new Firma("Microsoft Corporation", "Redmont, Washington");
const google = new Firma("Google LLC", "Mountain View, California");

document.body.innerHTML += microsoft.nazev;
document.body.innerHTML += "<br />";
document.body.innerHTML += google.nazev;

Nyní již víme, k čemu slouží ony závorky za názvem třídy - volají konstruktor a mohou mu předat parametry Po spuštění skriptu získáme stejný výpis, jako v ukázce na začátku lekce:

Tvoje stránka

localhost

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

Třídní atributy

JavaScript umožňuje definovat tzv. třídní atributy (anglicky class fields). Jde o vlastnosti, které definujeme přímo v těle třídy a které se vždy automaticky přiřadí každé instanci dané třídy.

Definujme naší třídě Firma třídní atributy nazev a sidlo:

class Firma {
    nazev;
    sidlo;
}

Vidíme, že definice třídního atributu je přímočará – přímo do těla třídy napíšeme jejich názvy zakončené středníkem. Jelikož naše vlastnosti již tvoříme přes konstruktor, nemá tato změna na naši aplikaci žádný vliv:

Tvoje stránka

localhost

Definování veřejných vlastností ve třídě není nutné, pokud již pro ně používáme konstruktor. Může přidat na čitelnosti našeho kódu, ale může být vnímáno i nadbytečně.

Výchozí hodnoty

Třídním atributům můžeme přímo nastavit výchozí hodnoty. Zajistíme tím, že instance tříd budou mít hned po jejich vytvoření inicializované dané vlastnosti na nějaké smysluplné hodnoty.

Doplňme naši třídu Firma o třídní atribut zamestnanci, zatímco konstruktor ponecháme beze změny. Naše třída bude vypadat následovně:

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

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

Zaměstnance firmy budeme ukládat do pole. Díky výchozí hodnotě vlastnosti zamestnanci v ní budeme mít po vytvoření instance rovnou prázdné pole připravené.

Zde je důležité si uvědomit, že výchozí hodnota může obsahovat i výraz, který se vyhodnocuje při každém vytvoření nové instance. Např. výpočet nebo volání metody.

Každá instance firmy tedy bude mít po svém vytvoření vždy unikátní instanci prázdného pole ve vlastnosti zamestnanci, kam si později může přidávat své zaměstnance oné dané firmy.

V další lekci, Implementace metod v JavaScriptu, si vytvoříme vlastní metody pro práci s firmou a jejími zaměstnanci.

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 733x (2.35 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

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

Uživatelské hodnocení:

350 hlasů

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

Aktivity

Nejčastěji vyhledáváné

Lekce 3 - Vlastnosti objektů a konstruktory v JavaScriptu

Vlastnosti v JavaScriptu

Definice vlastností

Konstruktor

Konstruktor firmy

Parametry konstruktoru

Třídní atributy

Výchozí hodnoty

Stáhnout