OBJEKTI I ES6

Šta ćete naučiti

• OBJEKTI:
• Literalna notacija
• Pomoću new Object()
• Factory function
• Konstruktorska funkcija
• ES6 klasa
 Objekat
Objekat je kombinacija promenljivih i funkcija.
Promenljive koje pripadaju objektu nazivaju se svojstva (properties),
a funkcije objekta nazivaju se metodi ( methods).
Objekat u JavaScript jeziku predstavlja kolekciju nekih svojstava. Ova svojstva
mogu biti primitivni tipovi podataka, drugi objekti ili funkcije.
 Kreiranje objekata

- Literalna notacija
- Pomoću new Object()
- Factory function
- Konstruktorska funkcija
 Literalna notacija objekta
Svojstva objekta se definišu između vitičastih zagrada:
 Literalna notacija objekta
Kreirati objekat osoba sa svojstvima ime, prezime, godine, telefon.
 Literalna notacija objekta
Kreirati objekat Auto sa svojstvima vrsta i brojVrata (primitivna svojstva), motor
(svojstvo tipa objekat, sa svojstvima snaga i zapremina) i potrošnja (funkcijsko
svojstvo, koje za dva prosleđena parametra vraća njihov zbir).

var auto={ vrsta: "limuzina", brojVrata: 5, motor:{ snaga: '185hp', zapremina: 1.5 }, potrosnja: funciton(a,b){ return a+b; } };
 Literalna notacija objekta

Kreirati objekat pas, čije je ime Džeki i ima 2 godine. Nakon kreiranja objekta
dodati mu i funkcijsku osobinu "zvuk", koja prilikom poziva vraća vrednost "AV
AV!"
 Literalna notacija objekta-primer
Definisati 2 objekta (osoba1 i osoba2) sa proizvoljnim vrednostima svojstava:
ime, prezime, godine i telefon. Proveriti koja osoba je starija i koja ima duže
ime. Rezultate ispisati.
 new Object()
Kreiranje praznog objekta pomoću ključne reči new i konstruktorske funkcije
Object(). Svojstva se dodaju nakon toga:
 new Object()
Kreirati objekat osoba sa svojstvima ime, prezime, godine, telefon.
 new Object()
Kreiranje praznog objekta pomoću ključne reči new i konstruktorske funkcije
Object(). Svojstva se dodaju nakon toga:
 Factory funkcija
Factory function je svaka funkcija koja kao rezultat vraća novi objekat. Najčešće
se zasniva na object literalu, ali je pogodniji zbog mogućnosti kreiranja više
objekata.
 Konstruktorska funkcija
Do sada smo se susretali sa ugrađenim konstruktorima new Array(), new
Date()...
 Konstruktorska funkcija
Pored ugrađenih konstruktora, moguće je deklarisati svoj konstruktor (funkcija,
prvo slovo imena funkcije pisati veliko)
• Objektu se mogu dodeliti nova svojstva i na sledeći način kao u sledećem
primeru pomoću prototypa:
function mojkrug(x, y, r) {
this.xkord = x;
this.ykord = y;
this.radius = r;
}
mojkrug.prototype.povrsina = function () {
return (Math.PI * this.radius * this.radius);
};
mojkrug.prototype.obim = function () {
return (Math.PI * this.radius * 2);
};
mojkrug.prototype.pomeri = function (xPom, yPom) {
this.xkord += xPom;
this.ykord += yPom;
};

var testkrug = new mojkrug(3, 4, 5);

testkrug.pomeri(2, 3);
document.write('Površina kruga je ' + testkrug.povrsina());
document.write('<br /> Obim kruga je ' + testkrug.obim());
• Svojstva objekta se ponašaju kao promenljive, u njega se mogu upisivati
vrednosti i čitati odatle. Svojstva mogu da sadrže bilo koji tip podataka,
uključujući i nizove, funkcije i druge objekte. Za deklarisanje svojstava se ne
koristi rezervisana reč var:
// Pravi objekat automobil
var automobil = new Object();
// Zadaje vrednost svojstvu u objektu
automobil.proizvodjac = "BMW";
// Zadaju se vrednosti još nekim svojstvima
automobil.motor = new Object();
automobil.motor.zapremina = 3000;
automobil.motor.snaga = "170ks";
automobil.karoserija = new Object()
automobil.karoserija.vrsta = "limuzina";
automobil.karoserija.boja = "bela";
alert('Boja automobila je '+automobil.karoserija.boja);
• Svojstvo objekta se može promeniti tako što se svojstvu dodeli nova
vrednost:
automobil.karoserija.boja = "crvena";

• Za pristupanje svojstvima objekta može se koristiti i operator [].

• Sledeća dva izraza u JavaScript-u daju identičan rezultat:

automobil.proizvodjac
automobil["proizvodjac"]
• Metoda je funkcija pridružena objektu. Metoda se definiše na isti način kao i
funkcija, a pridružuje se objektu na sledeći način:

imeObjekta.imeMetode = nazivFunkcije;

• A metoda pridružena objektu se može pozvati:

imeObjekta.imeMetode(parametri);
Može se dodati // Pravi objekat automobil
metoda ofarbaj() var automobil = new Object();
objektu automobil iz // Zadaje vrednost svojstvu u objektu
automobil.proizvodjac = "BMW";
prethodnog primera: // Zadaju se vrednosti jos nekim svojstvima
automobil.motor = new Object();
automobil.motor.zapremina = 3000;
Može se primetiti da automobil.motor.snaga = "170ks";
objekat preko koga automobil.karoserija = new Object();
se poziva metoda automobil.karoserija.vrsta = "limuzina";
automobil.karoserija.boja = "bela";
postaje vrednost // Definise se metoda ofarbaj
rezervisane reči this automobil.karoserija.ofarbaj = ofarbaj;
u telu metode. // Definise se funkcija ofarbaj
function ofarbaj(boja) { this.boja = boja; }
automobil.karoserija.ofarbaj("crvena");
alert("Nova boja automobila je" +automobil.karoserija.boja);
Svojstvo objekta može se obrisati pomoću operatora delete. Brisanje svojstva znači
da se to svojstvo uklanja iz objekta.:
delete automobil.karoserija.vrsta;
Pristup svojstvima pomoću petlje. Kada se radi sa objektima čija svojstva se ne znaju
unapred, petlja for/in omogućava da se iterativno pristupa svojstvima objekta, tj. da se
svojstva nabrajaju:

function PrikazhiSvojstvaObjekta(obj) {
var ime = "";
for(var ime in obj) {
ime += ime + "\n";//ili <br> ako je ispis na stranici
}
}
Da li objekat ima neko svojstvo moguće je ispitati pomoću operatora in, na primer:

/* Ako objekat automobil ima svojstvo proizvodjac dodeliti mu

vrednost "Alfa Romeo" */
if ("proizvodjac" in automobil){
automobil.proizvodjac = "Alfa Romeo";
}
 Kreiranje klase ES6
Izgled klase je veoma sličan sintaksi kreiranja objekta prema ES5 standardu,
mada je čitljiviji zbog manje redova i izbačenih nepotrebnih delova.
 Kreiranje klase ES6
• Obične metode
Metode definišemo kao funkcije, ali bez ključne reči function. Mada treba
napomenuti da metode unutar klase imaju “enumerable” svojstvo setovano na
false, što znači da u startu nisu dostupna “for..in” petlji.

• Constructor metoda
Constructor je specijalna metoda koja kreira i inicijalizuje objekat. Ova metoda
je pandan konstruktorskoj funkciji iz ES5, u njoj se definiše sve što je potrebno
da se inicijalizuje novi objekat, uz napomenu da može postojati samo jedna
“constructor” metoda unutar jedne klase.
 Kreiranje klase ES6
• Statičke metode
Statičke metode su metode koji ne pripadaju instanciranom objektu, već samoj
klasi, stoga im se ne može pristupiti iz instanciranog objekta. Jedini pristup ovim
metodama je preko same klase. Ovakve metode se definišu korišćenjem
rezervisane reči “static” ispred naziva metode.

• Get i Set metode

U mnogim programskim jezicima se pristup privatnim svojstvima ostvaruje uz
korišćenje specijalnih metoda tzv. “get-era” i “set-era”. Tako je i kod JavaScript-
a, kod koga se ovakve metode u okviru klase označavaju dodavanjem
rezervisane reči “get/set” ispred samog naziva metode.
Kreiranje klase ES6
 Vežba
Definisati objekat konstruktor, koji ima svojstva: ime, godine, grupa,
HTMLocena, CSSocena, Jsocena i funkcijsko svojstvo prosek (za izračunavanje
prosečne ocene).
Kreirati 2 objekta, polaznik1 i polaznik2, i odrediti koji od njih ima veći prosek.

Rešiti zadatak:
a) Pomoću factory funkcije
b) Pomoću konstruktorske funkcije
Rešenje (factory funkcija)
 Domaći zadatak
Napraviti niz od 5 objekata koji imaju sledeća svojstva:

fullName - ime i prezime razdvojeno praznim poljem(space)

yearOfBirth - godina rođenja

-Proći kroz svaki element niza (u petlji) i dodati mu property ‘godine’ sa vrednošću jednakoj
broju godina datog objekta (trenutna godina minus godište)
-Izračunati prosečan broj godina(napraviti novu petlju koja to izračunava)
-Nakon svake od prethodnih tačaka ispisati rezultat u konzoli
Pitanja za proveru znanja
• Objasniti sledeće elemente objekta:
• svojstva (properties)
• metodi
• procedure za obradu događaja
• Šta su arrow function i koji oblici postoje?
• Kako se može sve kreirati objekat?
• Navesti primer klase i kreiranja objekta pomocu klase.
 Literatura
https://www.valentinog.com/blog/js-execution-context-call-
stack/#JavaScript_What_Is_The_Execution_Context_How_Does_Javascript_Run_Your_Code

Vizuelizacija koda : http://latentflip.com/loupe ,

http://www.pythontutor.com/visualize.html#mode=edit i

https://tylermcginnis.com/