Základy programovania v JavaScripte

Príklady na precvičovanie

  • objekty

Milan Herda, 06/2020

Zadanie 1

Vytvorte objekt reprezentujúci zviera.

Objekt bude mať vlastnosti:

  • názov zvieraťa
  • počet nôh
  • príznak toho, či vie lietať
  • zvuk, aký vydáva

 

Bude mať aj metódu vydajZvuk, ktorá vráti reťazec v tvare:

'{nazov} robi {zvuk}'

Riešenie 1

const zviera = {
    nazov: 'pes',
    pocetNoh: 4,
    vieLietat: false,
    zvuk: 'haf',
    vydajZvuk: function () {
        return this.nazov + ' robí ' + this.zvuk;
    },
};

Zadanie 2

Vytvorte objekty reprezentujúce psa, mačku a líšku

Riešenie 2

const pes = {
    nazov: 'pes',
    pocetNoh: 4,
    vieLietat: false,
    zvuk: 'haf',
    vydajZvuk: function () {
        return this.nazov + ' robí ' + this.zvuk;
    },
};

const macka = {
    nazov: 'macka',
    pocetNoh: 4,
    vieLietat: false,
    zvuk: 'mňau',
    vydajZvuk: function () {
        return this.nazov + ' robí ' + this.zvuk;
    }
};

const liska = {
    nazov: 'liska',
    pocetNoh: 4,
    vieLietat: false,
    zvuk: 'what does the fox say',
    vydajZvuk: function () {
        return this.nazov + ' robí ' + this.zvuk;
    }
};

Riešenie 2

const pes = {
    nazov: 'pes',
    pocetNoh: 4,
    vieLietat: false,
    zvuk: 'haf',
    vydajZvuk: function () {
        return this.nazov + ' robí ' + this.zvuk;
    },
};

const macka = {
    nazov: 'macka',
    pocetNoh: 4,
    vieLietat: false,
    zvuk: 'mňau',
    vydajZvuk: function () {
        return this.nazov + ' robí ' + this.zvuk;
    }
};

const liska = {
    nazov: 'liska',
    pocetNoh: 4,
    vieLietat: false,
    zvuk: 'what does the fox say',
    vydajZvuk: function () {
        return this.nazov + ' robí ' + this.zvuk;
    }
};

Ak potrebujeme vytvárať viacero

objekto, ktoré majú rovnaké

vlastnosti, ale rôzne hodnoty

pre ne, tak:

 

toto nie je ideálny postup.

 

Pretože nie je opakovateľný

a danú inštanciu musíte

vždy ručne naprogramovať.

Zadanie 3

Vymyslite spôsob, ako tvoriť objekty zvierat bez toho, aby sme vždy museli nanovo vytvárať metódu vydajZvuk

Riešenie 3

const vydajZvuk = function () {
    return this.nazov + ' robí ' + this.zvuk;
};

const pes = {
    nazov: 'pes',
    pocetNoh: 4,
    vieLietat: false,
    zvuk: 'haf',
    vydajZvuk: vydajZvuk,
};

const macka = {
    nazov: 'macka',
    pocetNoh: 4,
    vieLietat: false,
    zvuk: 'mňau',
    vydajZvuk: vydajZvuk,
};

const liska = {
    nazov: 'liska',
    pocetNoh: 4,
    vieLietat: false,
    zvuk: 'what does the fox say',
    vydajZvuk: vydajZvuk,
};

Riešenie 3

const vydajZvuk = function () {
    return this.nazov + ' robí ' + this.zvuk;
};

const pes = {
    nazov: 'pes',
    pocetNoh: 4,
    vieLietat: false,
    zvuk: 'haf',
    vydajZvuk: vydajZvuk,
};

const macka = {
    nazov: 'macka',
    pocetNoh: 4,
    vieLietat: false,
    zvuk: 'mňau',
    vydajZvuk: vydajZvuk,
};

const liska = {
    nazov: 'liska',
    pocetNoh: 4,
    vieLietat: false,
    zvuk: 'what does the fox say',
    vydajZvuk: vydajZvuk,
};

Lepšie riešenie je vytvoriť tzv.

factory funkciu,

v ktorej sa nám vytvorí objekt

podľa nejakej "šablóny".

Zadanie 4

Vytvorte funkciu, ktorá vo vnútri vytvorí objekt zvieraťa so všetkými vlastnosťami nastavenými na nejakú defaultnú hodnotu a metódou vydajZvuk.

 

Tento objekt sa z funkcie vráti a následne volajúci kód môže nastaviť potrebné vlastnosti.

 

Riešenie 4

const vytvorZviera = function () {
    return {
        nazov: 'názov zvieraťa',
        pocetNoh: 4,
        vieLietat: false,
        zvuk: 'aký zvuk zviera vydáva?',
        vydajZvuk: function () {
            return this.nazov + ' robí ' + this.zvuk;
        },
    };
};

const pes = vytvorZviera();
pes.nazov = 'pes';
pes.zvuk = 'haf';

Lepšie, ale stále celkom neužitočné.

Zadanie 5

Dajte factory funkcii parametre, podľa ktorých sa nastavia vlastnosti zvieraťa.

Riešenie 5

onst vytvorZviera = function (nazov, pocetNoh, vieLietat, zvuk) {
    return {
        nazov: nazov,
        pocetNoh: pocetNoh,
        vieLietat: vieLietat,
        zvuk: zvuk,
        vydajZvuk: function () {
            return this.nazov + ' robí ' + this.zvuk;
        },
    };
};

const pes = vytvorZviera('pes', 4, false, 'haf');

Aby sme nemuseli nastavovať všetky argumenty, tak môžeme namiesto zoznamu argumentov poslať iba jeden, ktorým bude objekt iba s tými vlastnosťami, ktoré chceme nastaviť.

Zadanie 6

Namiesto zoznamu argumentov pošlite do factory funkcie iba jeden, ktorým bude objekt iba s tými vlastnosťami, ktoré chceme nastaviť :)

Riešenie 6

const vytvorZviera = function (vlastnosti) {
    const zviera = {
        nazov: 'názov zvieraťa',
        pocetNoh: 4,
        vieLietat: false,
        zvuk: '???',
        vydajZvuk: function () {
            return this.nazov + ' robí ' + this.zvuk;
        },
    };

    if (vlastnosti.nazov !== undefined) {
        zviera.nazov = vlastnosti.nazov;
    }

    if (vlastnosti.pocetNoh !== undefined) {
        zviera.pocetNoh = vlastnosti.pocetNoh;
    }

    if (vlastnosti.vieLietat !== undefined) {
        zviera.vieLietat = vlastnosti.vieLietat;
    }

    if (vlastnosti.zvuk !== undefined) {
        zviera.zvuk = vlastnosti.zvuk;
    }

    return zviera;
};

const pes = vytvorZviera({
    nazov: 'pes',
    zvuk: 'haf',
});

Zadanie 7

Skúste factory funkciu skrátiť.

Tip: použite cyklus for..in

Riešenie 7

const vytvorZviera = function (vlastnosti) {
    const zviera = {
        nazov: 'názov zvieraťa',
        pocetNoh: 4,
        vieLietat: false,
        zvuk: '???',
        vydajZvuk: function () {
            return this.nazov + ' robí ' + this.zvuk;
        },
    };

    for (let vlastnost in vlastnosti) {
        zviera[vlastnost] = vlastnosti[vlastnost];
    }

    return zviera;
};

const pes = vytvorZviera({
    nazov: 'pes',
    zvuk: 'haf',
});

Bonus:

Kľúčové slovo this nie je obyčajná premenná.

 

Jeho hodnota sa vyhodnocuje vždy až vo chvíli použitia/volania a odvoláva sa na objekt, nad ktorým bola funkcia(!) zavolaná.

Ak je funkcia volaná mimo objektu, tak this sa defaultne nastavuje na globálny objekt

(v prehliadačoch je to window, v prostredí node.js je to global)

Bonus:

Ak je to potrebné, tak pri volaní viete this predefinovať.

Funkcie k tomu majú metódy call a apply

pes.vydajZvuk(); // pes robí haf
pes.vydajZvyk.call(macka); // macka robí mňau
pes.vydajZvuk.apply(macka); // macka robí mňau

Školenie JS 2020 - príklady 03

By Milan Herda

Školenie JS 2020 - príklady 03

  • 548

More from Milan Herda