Geek tričko zdarma Geek tričko zdarma
Hledáme grafika na pohodovou brigádu v Blenderu nebo programátora na hry v PyGame. Máš zájem? Napiš nám na redakce [zavináč] itnetwork.cz!
Tričko zdarma! Stačí před dobitím bodů použít kód TRIKO15. Více informací zde

Lekce 10 - Vlastnosti objektů v JavaScriptu

Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem.
Vydávání, hosting a aktualizace umožňují jeho sponzoři.

V minulé lekci, Dědičnost a polymorfismus v JavaScriptu, jsme se naučili používat OOP techniky dědičnost a polymorfismus. Dnes si rozšíříme znalosti o vlastnostech objektů, naučíme se je přidávat, vypisovat a mazat. Ještě než se na to přímo vrhnene, pojďme si v rychlosti zopakovat, jak se vlastnosti u objektů dají vlastně tvořit.

Přidávání vlastností

Objekty jsou dynamické prvky JavaScriptu, tudíž jejich vlastnosti můžeme přidávat a mazat i po tom, co jsme je vytvořili. Nejobvyklejší zápis přidání vlastnosti je následující: napíšeme název objektu a operátorem tečky mu novou vlastnost přiřadíme:

const clovek = {
    jmeno: 'Jan',
    vek: 45
}

clovek.povolani = 'hasič';

Pro zjednodušení jsme nedefinovali třídu Clovek, jako doposud, ale rovnou přímo konkrétní instanci s konkrétními hodnotami. Potřebujeme totiž jen jednoho člověka do příkladu a více jich nikdy nebude. Třídu Clovek bychom samozřejmě mohli vytvořit a od ní poté takovouto instanci vytvořit standardním způsobem.

Existuje ale ještě další způsob jak vlastnost objektu přidat a to je přes []. Za název objektu přidáme hranaté závorky a dovnitř vpíšeme název vlastnosti jako text. Tuto možnost můžeme používat např. pokud jméno vlastnosti předem neznáme a později ho budeme někde načítat z proměnné. Mějme objekt z předchozího příkladu a přidejme do něj stejnou vlastnost, akorát pomocí této metody:

clovek['povolani'] = 'hasič';
// nebo
const nazevVlastnosti = 'povolani';
clovek[nazevVlastnosti] = 'hasič';

Procházení vlastností

Někdy se nám stane, že budeme potřebovat vlastnosti našeho objektu např. vypsat. Existuje více možností, jak to udělat, pojďme si ukázat ty nejpoužívanější.

for..in cyklus

for..in cyklus funguje na téměř stejném principu jako klasický for cyklus, místo deklarování nějaké proměnné a nastavování jejího opakování však deklarujeme pouze proměnnou, do které se v každé iteraci cyklu uloží vlastnost objektu. Iterací proběhne tolik, kolik je v objektu vlastností. Pojďme se podívat na příklad:

const obdelnik = {
    x: 10,
    y: 20,
    nakresli: function() {
        console.log('nakresleno');
    }
}

for (let index in obdelnik) {
    console.log(index);
}
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Máme objekt s název obdelnik, jeho vlastnosti jsou x, y a má metodu nakresli() (nevšímejme si nyní toho, že funkce pouze vypisuje text do konzole). Po iteraci by měl výpis v konzoli, kterou v prohlížeči otevřeme klávesou F12, vypadat takto:

Console log 1

Do každého indexu se nám vždy uložil název vlastnosti a vypsali se. Pokud bychom chtěli vypsat i hodnoty vlastností, cyklus by vypadal následovně:

for (let index in obdelnik) {
    console.log(index, obdelnik[index]);
}

Používáme výše zmíněný přístup do vlastností přes hranaté závorky. Cyklus funguje následovně:

  • do proměnné index se uloží první vlastnost, v našem případě je to "x" (ve formátu string)
  • nyní se dostáváme do druhé části logu, kde se použije výpis vlastností přes hranaté závorky, do kterých se vepíše index, který je ve formátu string, tudíž dostaneme hodnotu této vlastnosti objektu
  • takto se cyklus opakuje pro všechny vlastnosti

Výsledek:

Console log 2

Metoda keys()

K výpisu také můžeme použít metodu keys(), kterou zavoláme na globální třídě Object. Do kulatých závorek poté napíšeme objekt, který chceme proiterovat. To celé uložíme do proměnné, kterou poté vypíšeme do konzole. Velká změna oproti for..in cyklu je, že vlastnosti se vrátí jako pole:

const obdelnik = {
    x: 10,
    y: 20,
    nakresli: function() {
        console.log('nakresleno');
    }
}

const keys = Object.keys(obdelnik);
console.log(keys);

a výsledek:

Console log 3

Na podobném principu funguje ještě metoda entries().

Zjištění přítomnosti vlastnosti na objektu

Občas je vhodné se ujistit, jestli se daná vlastnost nachází v daném objektu. K tomuto účelu můžeme použít standardní podmínku a v ní operátor in. Ukažme si to na obdélníku z minulého příkladu:

const obdelnik = {
    x: 10,
    y: 20,
    nakresli: function() {
        console.log('nakresleno');
    }
}

if ('x' in obdelnik) {
    console.log('Vlastnost existuje!');
}

Pokud x v našem objektu existuje, do konzole se vypíše hláška.

Mazání vlastností

Vlastnosti můžeme objektu i smazat. Je to velice jednoduché, používá se k tomu klíčové slovo delete a název objektu s jeho vlastností, kterou chceme smazat:

const obdelnik = {
    x: 10,
    y: 20,
    nakresli: function() {
        console.log('nakresleno');
    }
}

delete obdelnik.x;

Pokud nyní vypíšeme do konzole obdelnik, uvidíme, že vlastnost x již nemá:

Console log 4

V příští lekci, Vlastnosti objektů v JavaScriptu - Data deskriptory, budeme s vlastnostmi objektů pokračovat a představíme si tzv. deskriptory.


 

 

Aktivity (5)

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!