spájame
slovenskú
IT komunitu
pridaj sa
Registrácia · Login

Jan Ranostaj 12.1.2012, článok je súčasťou seriálu OOP v Javascripte
Hodnoť článok:
0 0

OOP v Javascripte [1] - Objekty

Čo sú objekty? Ako ich definujeme a používame. Prečo programovať objektovo v Javascripte?

Začnem teda asi tým, že prečo programovať objektovo a aké výhody tento prístup prináša.

  • Znovu použiteľnosť kódu (re-usability)
  • Jednoduchšia aktualizácia kódu
  • Využívanie dedičnosti objektov
  • Ochrana premenných a metód v kóde tým, že povolíme prístup k nim len cez špecifické metódy
  • Vytváranie samostaných funkčných blokov, ktoré dokážeme spájať bez toho aby sme nejakým spôsobom porušili/ovplyvnili už existujúcu funkcionalitu.

Javascriptový objekt je v podstate množina key-value párov. Čo vlastne vytvára komplexný dátový typ v porovnaní dátových typov ako String, Integer a pod.... Každý key-value pár v objekte sa volá "property" kde key je "property name" a value "property value"

Vytvorenie objektu

Objekt literal:

var Person = {
    name : "Jano",
    age: 31,
    sex: 'male'

};

K jednotlivým členom objektu pristupujeme nasledovne:

//zápis s bodkou
console.log(Person.name); // 'Jano'
//alebo zápis cez zátvorky
console.log(Person['name']); // 'Jano'

Týmto zápisom je možné jednoducho a rýchlo vytvoriť objekt. Avšak tento sôsob je veľmi neefektívny v prípade, že máme vytvorť mnoho objektov, musíme všetky metódy a vlastnosti písať do každého objektu znovu:

var Jano = {
            name: 'Jano',
            age: 31
          };

Jano.name // Jano

var Marek = {
            name: 'Marek',
            age: 25
     };

Marek.name // Marek 

Objekt constructor:

var Person = function() { }

// Person voláme ako funkciu
var result  = Person();
console.log(result); // undefined

// Person() voláme ako constructor
var person = new Person();
console.log(typeof person); // object
console.log(person instanceof Person);  // tue
console.log(person.constructor==Person); // true

Týmto zápisom sme vytvorili constructor Person. Pokiaľ voláme Person ako klasickú funkciu, vráti nám undefined, avšak čo sa stane ak použijeme zázračné slovko new v spojení s Person()?
Vráti sa nám new object ako inštancia objektu Person.

Niečo iné nastane keď Person voláme ako constructor this sa na miesto odkazovania na globálny objekt, (v tomto prípade fruit) odkazuje na vytvorený objekt:


var fruit = 'apple';

var Person = function() {

   console.log(this.fruit)   ;
};

  Person() // 'apple'
  new Person(); // undefined

Volanie new Person() vrátil undefined pretože this.fruit v tomto prípade odkazuje na novo vytvorený objekt, v ktorom fruit nieje definovaný.
To môžeme opraviť nasledovne:


var Person = function(name,age) {

   this.name = name;
   this.age = age;
   this.view = function() {
	console.log(this.name + ',' + this.age);
   }

};

var Jano = new Person('Jano', 30);
var Marek  = new Person('Marek', 25);

 Jano.view(); //  'Jano, 30'
 Marek.view(); //  'Marek, 25'   

Takže this sa v tomto prípade odkazuje na novú inštanciu objektu Person.

Tu môžeme vidieť jasný rozdiel medzi objekt literal a objekt constructor.
Kým v zápise literal musíme explicitne definovať štruktúru pre každý objekt zvlášť, tak v prípade zápisu constructor definujeme jednu štruktúru pre všetky objekty.

Pokračovanie...

Na budúce si povieme ako rozšíriť základný objekt pomocou objektu prototype o dedičnosti a čo to o zjednodušenom modeli prototype.

Jan Ranostaj Jan Ranostaj

Programátor, vývojár aplikácii.


Hodnoť článok:
0 0

5 komentárov k článku:

Komentovať môžu iba prihlásení

Zaregistruj sa cez bezplatnú registráciu alebo použi login cez Facebook (FB Connect)

Prihlás sa tu, ak už máš profil na Zajtra.sk:


Zabudol som heslo

0 0 Vladimir Modrooký Diablik 12.5.2012 09:06:26
skopiroval som si tvoj posledny kod ale v konzole mi vyhadzuje hlašku ReferenceError: Jano is not defined nevieš čo stym može byť??

PS: Už mi to ide..ten tvoj kod som mal obalený v
(function() {
atd
})();
tak asi mi to preto neslo...ale kedže ja som taky v tomto beginer a chcel by som vediet prečo mi to neslo ked som to mal ešte obalene??
0 0 Roland Dobos 4.3.2012 12:04:31
@Peter - každý má svoj štýl...
0 0 Jan Ranostaj 4.2.2012 14:10:36
@Peter - myslim, ze to je vec zapisu, osobne to tak pouzivam stale, zda sa mi to prehladnejsie.

@slimco - diki :)
0 0 Peter Širka 3.2.2012 10:21:45
Nepáči sa mi tá deklarácia novej triedy cez var.... Aj na zdrojak.root.cz to tak robili, prečo? Je to úplne neprehľadné pre kódera. Cez var chceme deklarovať premenné, ale nie deklarácie. Dá sa to oveľa prehľadnejšie:

function Person() {

}

var person = new Person();
0 0 slimco 1.2.2012 08:39:09
Cau Jano :D dobrý článok, budem čakať ďalší :)
Zajtra.sk > Programovanie > Seriály > OOP v Javascripte [1] - Objekty


Kritika

Vieš ako robiť veci lepšie? Pomôž našim odvážnejším členom a skritizuj im projekty!

Reklama

Seriály zo Zajtra.sk

Reklama