Objekty v JavaScripte – vytvorenie objektu

10. ledna 2001

•

Pri tvorbe skriptov sa často používajú objekty. JavaScript nám ponúka niektoré už zabudované objekty, napr. pole Array patrí taktiež medzi zabudované objekty JavaScriptu. Väčšinou nás pri tvorbe skriptov zaujímajú vlastnosti a metódy týchto objektov. Dnes si ukážeme ako si vytvoriť vlastný objekt, alebo obohatiť objekty JavaScriptu o vlastnosti, alebo metódy. Článok som sa snažil napísať spôsobom, aby mu porozumeli aj začiatočníci v JavaScripte.

Objekt je dátový typ. Každý objekt má (ale nemusí) svoje vlastnosti a metódy. Predstavme si napríklad objekt „Clovek“, pri ktorom budeme za vlastnosti považovať „meno“ a „priezvisko“. K vytvoreniu takéhoto objektu si najprv musíme napísať funkciu, v ktorej objektu priradíme tieto vlastnosti. Urobíme to pomocou kľúčového slova this nasledovne:

function Clovek(m,p){
  this.meno = m;
  this.priezvisko = p;
  }

Uvedenej funkcii hovoríme, že je konštruktorom objektu. Samotný objekt potom vytvoríme pomocou operátora new.

dievca = new Clovek(„Barbora“,“Nová“);

K vlastnostiam objektov sa obyčajne pristupuje pomocou operátora „.“ (bodka). Taktiež by sme mohli použiť operátor „[]“, ale ten sa skôr používa pri poliach Array. Nasledujúci príklad vytvorí objekt „dievca“, kde sa pri kliknutí na odkaz objavia jeho vlastnosti. Na ukážku som použil k prístupu vlastností oba operátory.

Zdrojový kód ukážky:

Keby sme potrebovali objektu pridať novú vlastnosť, môžeme to urobiť veľmi jednoducho pomocou názvu novej vlastnosti a operátora priradenia „=“ môžeme tejto vlastnosti priradiť novú hodnotu. Teda ak by sme nášmu dievčaťu potrebovali pridať novú vlastnosť „vek“, urobili by sme to nasledovne:

dievca.vek = 23;
<a href=“javascript: alert(‚Nová vlastnosť vek = ‚ + dievca.vek)“>Tu je dôkaz.&lt/a>

Uvedeným spôsobom by sme pridali vlastnosť „vek“ iba objektu „dievca“. Ak by sme mali vytvorené aj iné objekty pomocou konštrukčnej funkcie „Clovek“ a taktiež by sme im potrebovali pridať vlastnosť „vek“, urobili by sme to pomocou vlastnosti prototype nasledovne:

chlapec = new Clovek(„Michal“,“Kubiš“);
otec = new Clovek(„Peter“,“Starý“);
Clovek.prototype.vek = 40;

Teda všetky objekty vytvorené pomocou konštrukčnej funkcie „Clovek“ budú obsahovať novú vlastnosť „vek“, ktorej hodnota je 40. Hodnota vlastnosti vek objektu dievča ostáva 23.

Okrem vlastností môže objekt obsahovať aj metódy. Metóda nie je nič iné, ako funkcia JavaScriptu, ktorá „pracuje“ na objekte. Napríklad k naším objektom dievca, chlapec a otec si pridáme metódu „starne“, ktorá k vlastnosti vek priráta číslo jedna. Napíšeme si funkciu „clovekStarne()“:

function clovekStarne(){
this.vek++;
}

Metódu objektu môžeme definovať hneď v konštrukčnej funkcii „Clovek“ nasledovne:

function Clovek(m,p){
  this.meno = m;
  this.priezvisko = p;
  this.starne = clovekStarne;
  }

Alebo, v našom prípade, pridaním metódy, rovnako, ako sme to robili pri pridávaní novej vlastnosti. Tak napríklad:

Clovek.prototype.starne = clovekStarne;

Teda nasledujúci príklad sa nám postará o zostarnutie dievčaťa:

dievca.starne();

Metóda môže obsahovať aj nejaké vstupné argumenty, napríklad:

function clovekMladne ( r ) {
this.vek -= r;
}
Clovek.prototype.mladne = clovekMladne;
dievca.mladne(5);

Nové vlastnosti, ale aj metódy, môžeme pridávať nielen nami vytvoreným objektom, ale aj objektom, ktoré sú zabudované v JavaScripte. Nasledujúci príklad pridáva k objektu Array metódu, ktorá vyhľadá najväčšie číslo z číselného poľa. Potom by sme túto metódu mohli použiť pri každom číselnom poli, ktoré by bolo vytvorené pomocou Array.

function poleMax(){
  var max = this[0];
  for(var i=1; i<this.length; i++)
    if(max<this[i])
      max = this[i];
  return max;
  }
pole = new Array(5,4,3,9,1,2);
Array.prototype.max = poleMax;
<a href=“alert(‚max = ‚ + pole.max( ))“>Maximum poľa.</a>

Na záver ešte malé zhrnutie: Objekt má vlastnosti (premenné) a metódy (funkcie), ktoré vytvárame v konštrukčnej funkcii. Samotný objekt vytvárame pomocou operátora new. Nové vlastnosti a metódy pridávame pomocou vlastnosti prototype.

Dúfam, že článok sa páčil a pomôže vám pri tvorbe skriptov. Uvedené príklady by mali fungovať aj na „historických“ verziách prehliadačov. V ďalšom diely o objektoch si povieme niečo o príkazoch a metódach, ktoré zjednodušujú prácu s objektmi.

Předchozí článek Dreamweaver 4 - vylepšená práce s tabulkami

Další článek Kompletní seznam klávesových zkratek v Easypadu 3.4