1001 način kreiranja objekata u JavaScriptu

new Object()

Jedan od najosnovnijih načina je kreiranje praznog objekta sa rezervisanom reči new na osnovu ugradjene konstruktorske funkcije Object(), a zatim pojedinačno dodavati svojstava.

var personObjekat = new Object();

personObjekat.ime = "Pera",
personObjekat.age = 42,
personObjekat.telefon = 063111222;
personObjekat.prikaziIme = function () {
  console.log("Ime osobe je " + this.ime);
};

var personObjekat = new Object();

personObjekat.ime = "Pera",

personObjekat.age = 42,

personObjekat.telefon = 063111222;

personObjekat.prikaziIme = function () {

console.log("Ime osobe je " + this.ime);

};

Literarna notacija

Ovaj tip kreiranja objekta je najjednostavniji, i zasniva se na definisanju svojstva objekta izmedju vitičastih zagrada:

var personObjekat = {
  ime: "Pera",
  age: 42,
  telefon: {
    mobilni: 063111222,
    fiksni: 013355000
  },
}

var personObjekat = {

ime: "Pera",

age: 42,

telefon: {

mobilni: 063111222,

fiksni: 013355000

}

Basic Factory Function

Factory function je svaka funkcija koja vraća novi objekat, a nije konstruktorska funkcija ili klasa.

Ovo je jednostavan način kreiranja funkcije, koji se najčešće zasniva na object literalu, a koristi se kada želimo da izbegnemo kompleksnost klasa ili konstruktorske funkcije. Ipak za razliku od object literala, sa kojim možemo da napravimo samo po jedan objekat, “factory function” može da generiše više od jednog.

“LIteral for ONe, Factories for Many”

function AutoFactory(marka, model, godinaProizvodnje) {
  var obj = {};                // ili moze da se koristi: var obj = new Object();
  obj.marka = "marka",
  obj.model = "model",
  obj.godProizvodnje = "godinaProizvodnje",
  obj.prikaziPoruku = function(){
         console.log("Auto je: " + this.marka +" " + this.model + " proizveden " + this.godProizvodnje + " godine")
  }
  return {
    obj;
  }
}
var objekatAuto = Auto("Citroen", "C5", 2012);

function AutoFactory(marka, model, godinaProizvodnje) {

var obj = {}; // ili moze da se koristi: var obj = new Object();

obj.marka = "marka",

obj.model = "model",

obj.godProizvodnje = "godinaProizvodnje",

obj.prikaziPoruku = function(){

console.log("Auto je: " + this.marka +" " + this.model + " proizveden " + this.godProizvodnje + " godine")

}

return {

obj;

}

var objekatAuto = Auto("Citroen", "C5", 2012);

ili još jednostavnije:

function AutoFactory(marka, model, godinaProizvodnje) {
  return {
    marka : "marka",
    model : "model",
    godProizvodnje : "godinaProizvodnje",
    prikaziPoruku : function(){
           console.log("Auto je: " + this.marka +" " + this.model + " proizveden " + this.godProizvodnje + " godine")
    }
  }
}
var objekatAuto = Auto("Citroen", "C5", 2012);

function AutoFactory(marka, model, godinaProizvodnje) {

return {

marka : "marka",

model : "model",

godProizvodnje : "godinaProizvodnje",

prikaziPoruku : function(){

console.log("Auto je: " + this.marka +" " + this.model + " proizveden " + this.godProizvodnje + " godine")

}

var objekatAuto = Auto("Citroen", "C5", 2012);

Ovaj pristup instanciranjem svakog novog objekta kopira i metode objekta, što dovodi do nepotrebnog trošenja resursa, naručito ako objekat ima veći broj metoda. Da bi izbegli trošenje resursa potrebno je da isokoristimo prednosti koje nam donosi “prototipsko nasledjivanje, gde se metode instanciraju samo jednom u okviru “prototype” objekta. Ovaj pristup je primenjen kod “Advanced Factory functions” postupka koji je objašnjen u nastavku.

Konstruktorska f-ja

Pri korišćenju rezervisane reči new se pravi novi objekat na osnovu konstruktorske funkcije sa kopijom svih svojstava iz konstruktorske funkcije.

function Auto(marka, model, godinaProizvodnje) {
  this.motor = "dizel";
  this.marka = marka;
  this.model = model;
  this.godProizvodnje = godinaProizvodnje;
	this.prikaziPoruku = function(){
     console.log("Auto je: " + this.marka +" " + this.model + " proizveden " + this.godProizvodnje + " godine")
  };
}
var mojAuto = new Auto("Citroen", "C5", 2012);

function Auto(marka, model, godinaProizvodnje) {

this.motor = "dizel";

this.marka = marka;

this.model = model;

this.godProizvodnje = godinaProizvodnje;

this.prikaziPoruku = function(){

console.log("Auto je: " + this.marka +" " + this.model + " proizveden " + this.godProizvodnje + " godine")

};

}

var mojAuto = new Auto("Citroen", "C5", 2012);

Novi objekat je dobio svoju kopiju svih svojstava (nisu samo delegirana), pa ukoliko sada promenimo neko svojsto u konstruktorskoj funkciji ono neće imati uticaja na instancirani objekat:

Auto.motor = "Benzinac";  // promenimo vrednost svojstva konstruktorske funkcije
mojAuto.motor; // Vraća: "dizel" (bez uticaja promene konstruktorskog svojstva na instancirani objekat)

1 2	Auto.motor = "Benzinac"; // promenimo vrednost svojstva konstruktorske funkcije mojAuto.motor; // Vraća: "dizel" (bez uticaja promene konstruktorskog svojstva na instancirani objekat)

Ukoliko se planira veliki broj instanci, ovaj metod nije baš preporučljiv jer će se pri instanciranju svakog objekta instancirati i metoda, što nepotrebno troši deo resursa. U tom slučaju je bolje koristiti šablon “konstruktorska f-ja + prototype objekat” kod koga su metode izdvojene u okviru “prototype objekta”. Kod tog šablona se u nove objekte instanciraju samo svojstva iz konstruktorske funkcije, dok se metode delegiraju kroz prototype lanac nasledjivanja (što znači da nema nepotrebnih instanci metoda).

Konstruktorska f-ja + prototype objekat

Pri korišćenju rezervisane reči new se pravi novi objekat na osnovu konstruktorske funkcije sa kopijom svih svojstava iz konstruktorske funkcije i o istom trošku se povezuje instancirani objekat sa “prototype objektom” konstruktorske funkcije čime mu se delegiraju sve metode. Preporuka je da se u prototype objektu smeste metode a da konstruktorska funkcija služi za iniciranje potrebnih svojstava.

Primer

function Auto(marka, model, godinaProizvodnje) {
  this.marka = marka;
  this.model = model;
  this.godProizvodnje = godinaProizvodnje;
}
Auto.prototype.prikaziPoruku = function(){
   console.log("Auto je: " + this.marka +" " + this.model + " proizveden " + this.godProizvodnje + " godine")
};
var mojAuto = new Auto("Citroen", "C5", 2012);

function Auto(marka, model, godinaProizvodnje) {

this.marka = marka;

this.model = model;

this.godProizvodnje = godinaProizvodnje;

}

Auto.prototype.prikaziPoruku = function(){

console.log("Auto je: " + this.marka +" " + this.model + " proizveden " + this.godProizvodnje + " godine")

};

var mojAuto = new Auto("Citroen", "C5", 2012);

Zadaci “new” rezervisane reči

Svaka funkcija može biti konstruktorska a takva postaje tek kada se pozove rezervisana reč new. Pri korišćenju rezervisane reči new, dešavaju se sledeći procesi:

Kreira se novi objekt
Povezuje novi objekat sa “prototype objektom” konstruktorske funkcije nakon čega može da koristi njegove delegirane metode
Ako konstruktorska funkcija ne vraća nikakvu vrednost, onda new iza kulisa dodaje “return this” tj. vraća novo generisani objekat.
Rezervisana reč “new” iza kulisa “preusmerava” this, da umesto globalnog objekta ukazuje na instancirane objekate.

Šta se dešava ako pozovemo konstruktorsku f-ju bez rezervisane reči “new”?

Ukoliko pozovemo (invoke) konstruktorsku funkciju bez rezervisane reči “new”, vratiti će grešku, jer ništa nije vraćeno:

function Auto(marka, model, godinaProizvodnje) {
  this.marka = marka;
  this.model = model;
  this.godProizvodnje = godinaProizvodnje;
}
var zeninAuto = Auto("Opel", "Corsa", 2002);
zeninAuto.marka; // Vraća Error

function Auto(marka, model, godinaProizvodnje) {

this.marka = marka;

this.model = model;

this.godProizvodnje = godinaProizvodnje;

}

var zeninAuto = Auto("Opel", "Corsa", 2002);

zeninAuto.marka; // Vraća Error

Medjutim ako prethodnoj konstruktorskoj funkciji eksplicitno dodamo “return this” i ponovo je pozovemo, ona će ispravno vraćati vrednosti svojstva:

function Auto(marka, model, godinaProizvodnje) {
  this.marka = marka;
  this.model = model;
  this.godProizvodnje = godinaProizvodnje;
  return this;
}
var zeninAuto = Auto("Opel", "Corsa", 2002);
zeninAuto.marka; // Vraća "Opel"

function Auto(marka, model, godinaProizvodnje) {

this.marka = marka;

this.model = model;

this.godProizvodnje = godinaProizvodnje;

return this;

}

var zeninAuto = Auto("Opel", "Corsa", 2002);

zeninAuto.marka; // Vraća "Opel"

Object.create()

Sa metodom Object.create() se pravi objekat kome se pri kreiranju definiše od kog objekta mu se delegiraju metode preko “prototype lanca” (ne dolazi do kopiranja svojstava!). Syntax-a za kreiranje objekat je:

Object.create(proto[, propertiesObject])

1	Object.create(proto[, propertiesObject])

Metoda Object.create() u pozadini izvršava sledeće taskove:
1.) Kreira se novi objekt
2.) Novi objekat se povezuje sa objektom od koga je nastao i tako se ubacuje u lanac nasledjivanja, nakon čega može ima pristup njegovim delegiranim metodama
3.) Opciono može da definiše i nova svojstva objekta.

Parametra “proto”

Prvi parametar koji se prosledjuje metodi “Object.create” je “proto”. On ukazuje na objekat od koga će naš objekat nasledjivati metode. Ukoliko pak želimo da kreiramo objekat, koji neće naslediti ničije metode tada za parametar koristimo vrednost “null”.

var objekatBezRoditelja = Object.create(null);

1	var objekatBezRoditelja = Object.create(null);

Opcioni “propertiesObject” paramaetri

Parametar “propertiesObject” je opcioni a kroz njega se dodaju nova svojstva konstruktorskoj funkciji. Medjutim treba naglasiti da su ovako dodata svojstva po default-u imaju sve deskriptore svojstva setovane na FALSE, pa su nepromenjiva i neupotrebljiva u for…in loop-u.

noviObjekat = Object.create({nekiMaticniObjekat}, { dodatoSvojstvo : { value: 42 } });

//Ako zelimo da promenimo vrednost svojstava vraća error
noviObjekat.dodatoSvojstvo = 60;   // Vraća ERROR

noviObjekat = Object.create({nekiMaticniObjekat}, { dodatoSvojstvo : { value: 42 } });

//Ako zelimo da promenimo vrednost svojstava vraća error

noviObjekat.dodatoSvojstvo = 60; // Vraća ERROR

Stoga ako dodajemo svojstva na ovaj način, potrebno je i predefinisati deskriptore:

noviObjekat = Object.create({nekiMaticniObjekat}, {
  dodatoSvojstvo : {
    value: 42,
    writable: true,
    enumerable: true,
    configurable: true
  }
});

noviObjekat.dodatoSvojstvo = 80;  // Ne vraća Error jer je writable: true
console.log(noviObjekat.dodatoSvojstvo);  // Vraća 80

noviObjekat = Object.create({nekiMaticniObjekat}, {

dodatoSvojstvo : {

value: 42,

writable: true,

enumerable: true,

configurable: true

}

});

noviObjekat.dodatoSvojstvo = 80; // Ne vraća Error jer je writable: true

console.log(noviObjekat.dodatoSvojstvo); // Vraća 80

Novi objekat koji se kreira sa Object.create() se najčešće se kreira na osnovu nekog “prototype objekta”, ali za “uzor” može da se izabere bilo koji “običan” objekat. Nismo u obavezi da nova svojstva objekta definišemo kroz ovaj opcioni parametar “Object.create(), možeme ih naknadno definisati sa Object.defineProperty():

var kalkulator = {
  "a" : 5,
  "izracunaj" : function(x) {
    console.log(this.a + " puta " + x + " je " + this.a*x);
  }
}

var digitron = Object.create(kalkulator);
Objec.definePropery(digitron, "b", {value: 10
                                  , writable: true
                                  , enumerable: true
                                  , configurable: true
                               })

var kalkulator = {

"a" : 5,

"izracunaj" : function(x) {

console.log(this.a + " puta " + x + " je " + this.a*x);

}

var digitron = Object.create(kalkulator);

Objec.definePropery(digitron, "b", {value: 10

, writable: true

, enumerable: true

, configurable: true

})

Advanced Factory functions

Za razliku od postupka “Basic factory functions” koji ne iskorišćava prednosti protipskog nasledjivanja, sa Advance Factory functions metode objekta smeštamo u prototype objekat, gde se instanciraju samo jednom a dostupne su svim napravljenim objektima.

// PROTOTYPE objekat:
var autoPrototype = {
  prikaziPoruku : function(auto){
    return "Auto je: " + auto.marka +" " + auto.model + " proizveden " + auto.godProizvodnje + " godine";
  }
};
// Advance Factory functions:
function  autoFactory (marka, model, godProizvodnje){
  //povezivanje sa prototype objektom "autoPrototype"
  var auto = Object.create(autoPrototype, {
    marka : {writable: false, value: marka},
    model : {writable: false, value: model},
    godProizvodnje : {writable: false, value: godProizvodnje},
  });
  return auto;
};
var mojAuto = autoFactory ("Citroen", "C5", "2014");
console.log(mojAuto.prikaziPoruku(mojAuto));

// PROTOTYPE objekat:

var autoPrototype = {

prikaziPoruku : function(auto){

return "Auto je: " + auto.marka +" " + auto.model + " proizveden " + auto.godProizvodnje + " godine";

}

};

// Advance Factory functions:

function autoFactory (marka, model, godProizvodnje){

//povezivanje sa prototype objektom "autoPrototype"

var auto = Object.create(autoPrototype, {

marka : {writable: false, value: marka},

model : {writable: false, value: model},

godProizvodnje : {writable: false, value: godProizvodnje},

});

return auto;

};

var mojAuto = autoFactory ("Citroen", "C5", "2014");

console.log(mojAuto.prikaziPoruku(mojAuto));

U prethodnom primeru promenjive autoPrototype i autoFactory su globalne pa je najbolje sve to “spakovati” u IFFE.

var autoFactory = (function(){
  var autoPrototype = {                                   // Ovo će da bude prototype objekat novog objekta
    prikaziPoruku : function(auto){
      return "Auto je: " + auto.marka +" " + auto.model + " proizveden " + auto.godProizvodnje + " godine";
    }
  };

  return function (marka, model, godProizvodnje){
    var auto = Object.create(autoPrototype, {     //Kreiranje novog objekta koji preuzima prototype objekt "autoPrototype" + dodavanje novih konstruktorskih svojstava (marka, model, godina)
      marka : {writable: false, value: marka},
      model : {writable: false, value: model},
      godProizvodnje : {writable: false, value: godProizvodnje},
    });
    return auto;                                   // Vraća krajnji kreirani objekat
  };
})();

var mojAuto = autoFactory ("Citroen", "C5", "2014");
console.log(mojAuto.prikaziPoruku(mojAuto));  // Vraca: "Auto je: Citroen C5 proizveden 2014 godine"

var autoFactory = (function(){

var autoPrototype = { // Ovo će da bude prototype objekat novog objekta

prikaziPoruku : function(auto){

return "Auto je: " + auto.marka +" " + auto.model + " proizveden " + auto.godProizvodnje + " godine";

}

};

return function (marka, model, godProizvodnje){

var auto = Object.create(autoPrototype, { //Kreiranje novog objekta koji preuzima prototype objekt "autoPrototype" + dodavanje novih konstruktorskih svojstava (marka, model, godina)

marka : {writable: false, value: marka},

model : {writable: false, value: model},

godProizvodnje : {writable: false, value: godProizvodnje},

});

return auto; // Vraća krajnji kreirani objekat

};

})();

var mojAuto = autoFactory ("Citroen", "C5", "2014");

console.log(mojAuto.prikaziPoruku(mojAuto)); // Vraca: "Auto je: Citroen C5 proizveden 2014 godine"

Sada je “autoPrototype” clousure i dostupna je samo iz konstruktorske funkcije.

ES6 klase

javascript_konverzija

U JavaScript-u NE POSTOJE KLASE i nasledjivanje u obliku u kakvom postoje u drugim objektno orjentisanim programskim jezicima! Rezervisana reč “class” u JavaScript-u je samo estetska zamena (eng. syntactical sugar) za konstruktorsku funkciju i “prototype objekat”, a nasledjivanje je ustvari delegiranje svojstava i metoda kroz “prototype lanac nasledjivanja”. U JavaScript-u “klasa” je specijalna vrsta funkcije, koja za razliku od obične funkcije ne može da se pozove (invoke) nego se koristi uz rezervisanu reč new. Telo klase se izvršava u “strict mode”.
Constructor je specijalna metoda koja kreira i inicijalizuje objekat uz pomoć ključne reči “class”. Ova metoda je pandan konstruktorskoj funkciji iz ES5. Može postojati samo jedna “constructor” metoda unutar jedne klase.

NAPOMENA:
Kreiranje objekata u Javascript-u sa rezervisanom reči “class” nije statičko (nepromenjivo nakon deklarisanja objekta) kao što je u drugim programskim jezicima, jer objekat i nakon instanciranja ostaje “vezan” za klasu delegiranjem metoda iz “prototype objekta”. Ukoliko dodamo ili promenimo neku metodu u klasi, promenjena metoda će biti delegirana i napravljenom objektu.

Class syntax

Postoje dve syntax-e da definišemo klasu u JavaScript-u:

Class declarations

class Auto  {
   constructor (marka, model, godinaProizvodnje){
     this.marka = marka;
     this.model = model;
     this.godProizvodnje = godinaProizvodnje;
   }
   prikaziPoruku (){
     console.log("Auto je: " + this.marka +" " + this.model + " proizveden " + this.godProizvodnje + " godine")
   };
}
var mojAuto = new Auto("Citroen", "C5", 2012);

class Auto {

constructor (marka, model, godinaProizvodnje){

this.marka = marka;

this.model = model;

this.godProizvodnje = godinaProizvodnje;

}

prikaziPoruku (){

console.log("Auto je: " + this.marka +" " + this.model + " proizveden " + this.godProizvodnje + " godine")

};

}

var mojAuto = new Auto("Citroen", "C5", 2012);

Osnovna razlika izmedju deklaracije funkcije i deklaracije klase je ta što se klase ne “hoist-uju” pri kompajliranju na početak programskog koda kao funkcije. Tako da treba obratiti pažnju da se klasa definiše pre nego što se korisiti “new” za kreiranje novog objekta.

Class expressions

Ovo je manje korišćen način definisanja klasa:

var Auto = class {
   constructor (marka, model, godinaProizvodnje){
     this.marka = marka;
     this.model = model;
     this.godProizvodnje = godinaProizvodnje;
   }
   prikaziPoruku (){
     console.log("Auto je: " + this.marka +" " + this.model + " proizveden " + this.godProizvodnje + " godine")
   };
}
var mojAuto = new Auto("Citroen", "C5", 2012);

var Auto = class {

constructor (marka, model, godinaProizvodnje){

this.marka = marka;

this.model = model;

this.godProizvodnje = godinaProizvodnje;

}

prikaziPoruku (){

console.log("Auto je: " + this.marka +" " + this.model + " proizveden " + this.godProizvodnje + " godine")

};

}

var mojAuto = new Auto("Citroen", "C5", 2012);

Više o klasama možete pročitati u članku “Klase u JavaScript-u”.

Podelite:

5 Responses to “1001 način kreiranja objekata u JavaScriptu”

R.Marković 06/01/2017

Dobro je napisano. Sviđa mi se. Zahvalan sam. Pozdrav

06/01/2017 at 13:24

R Marković 03/08/2017

poučno je i dobro koncipirano. Kolegijalni pozdrav. R. Marković diplomirani matematičar

03/08/2017 at 20:35

- Dragoljub 03/08/2017
  
  Hvala
  
  03/08/2017 at 20:37
  
Alex 24/04/2018

Care

24/04/2018 at 15:24

- Dragoljub 02/05/2018
  
  🙂
  
  02/05/2018 at 07:44

Web Programiranje

Skripte

1001 način kreiranja objekata u JavaScriptu

new Object()

Literarna notacija

Basic Factory Function

Konstruktorska f-ja

Konstruktorska f-ja + prototype objekat

Primer

Zadaci “new” rezervisane reči

Šta se dešava ako pozovemo konstruktorsku f-ju bez rezervisane reči “new”?

Object.create()

Parametra “proto”

Opcioni “propertiesObject” paramaetri

Advanced Factory functions

ES6 klase

Class syntax

Class declarations

Class expressions

5 Responses to “1001 način kreiranja objekata u JavaScriptu”

Ostavite komentar