Javascript OOP

Teme vezane za profesionalni razvoj web stranica.
3 post(ov)a • Stranica: 1/1.

Javascript OOP

PostPostao/la webmaster » 25 svi 2014, 16:36

Poz

Pokušavam skužiti OOP, a kako Javascript to nema nativno, onda mi to moram priznati nije baš najasnije.

Kad se koristi prototype?
Kad se koristi createDelegate?


Koja je razlika između ova dva načina definiranja funkcija i kad se treba koristi jedno a kad drugo

Kod: Označi sve
function a(b) {
  this.c= b;
}

ili

a: function (b) {
  this.c= b;
}


Kako pristupiti funkciji unutar funkcije (scope).
Recimo imam u this.xx nešto i to želim u funkciji nekoj, ali mi nije dostupno.

i još dosta pitanja, me mući.

Lp

Re: Javascript OOP

PostPostao/la Armin » 25 svi 2014, 17:57

Zdravo, dobrodošao na forum.

Pokušat ću na najjednostavniji način odgovorit na tvoja pitanja.

webmaster je napisao/la:Poz

Pokušavam skužiti OOP, a kako Javascript to nema nativno, onda mi to moram priznati nije baš najasnije.


Zapravo u javascript imaš već određeni OOP pristup. Posmatraj ovako:

javascript code
var osoba = {
ime : 'Mujo',
prezime: 'Mujić',
zanimanje: 'Programer'
}


Sada smo kreirali objekat pod imenom osoba koji ima svoja polja ime, prezime i zanimanje. I sada možemo učitati te podatke kao:

javascript code
var Ime = osoba.ime;


Možemo primijetiti da sam iznad koristio " : " pri kreiranju objekta. Znači da ja ustvari kreiram asocijativni niz objekata po sistemu ključ:vrijednost kao što to radimo u php-u. Isto tako mogu se kreirati metodi. Posmatrajmo primjer.

javascript code
var osoba = {
ime : 'Mujo',
prezime: 'Mujić',
zanimanje: 'Programer',
punoIme: function() { return this.ime + ' ' + this.prezime }
}


Sada možemo pozvati metod kao:

javascript code
var nazivOsobe = osoba.punoIme();


Ovo iznad predstavlja jedan način definiranja objekata u JS-u. Drugi način je korištenje funkcija kao objekata. Npr.

javascript code
function osoba(ime,prezime,zanimanje)
{
this.ime = ime;
this.prezime = prezime;
this.zanimanje = zanimanje;
this.punoIme = function() { return this.ime + ' ' + this.prezime }
}


webmaster je napisao/la:Kad se koristi prototype?


Ako posmatramo iznad kprišteni kod možemo primijetiti da se pri svakom kreiranju objekta tipa osoba nanovo kreira funkcija punoIme(). Primarna upotreba prototype je da se ubrza kreiranje objekata. Posmatrajmo korak po korak:

javascript code
osoba.prototype; //vraća prazan objekat tipa osoba

osoba.prototype.punoIme = function(){ return this.ime + ' ' + this.prezime;} //kreira metod punoIme za prototip objekta osoba
}


Ipak, sve ima svoje prednosti i mane. Ukoliko bi imali neke privatne varijable unutar objekta osoba, koristeći prvi pristup (bez prototipa) dobijamo pristup tim varijablama, dok u drugom slučaju to nemamo.

javascript code
function osoba(ime,prezime,zanimanje)
{
var nekaVarijabla = 10; //nije vidljivo koristeći prototype
this.ime = ime;
this.prezime = prezime;
this.zanimanje = zanimanje;
this.punoIme = function() { return this.ime + ' ' + this.prezime }
}


webmaster je napisao/la:
Kad se koristi createDelegate?


Funkcija createDelegate nije nativna JS funkcija. Generalno, delegate funkcije se koriste kada želimo koristiti this unutar metoda neke funkcije, tako da u tim metodima možemo hvatiti određene događaje. Npr.

javascript code
function osoba() {
this.podaci= function() {
console.log(this);
}
}

osoba.podaci(); //vraća informacije o objektu osoba


Nisam baš koristio ovu funkciju tako da ne mogu dati detaljnije objašnjenje.

webmaster je napisao/la:
Koja je razlika između ova dva načina definiranja funkcija i kad se treba koristi jedno a kad drugo

Kod: Označi sve
function a(b) {
  this.c= b;
}

ili

a: function (b) {
  this.c= b;
}




Prvi način definiranja funkcije se izvršava pri runtime-u, dok se drugi dio izvršava pri parsiranju. Pogledaj primjer:

javascript code
funkcija1(); //javlja grešku
var funkcija1 = function(){}

funkcija2(); //ne javlja grešku
function funkcija2(){}


webmaster je napisao/la:Kako pristupiti funkciji unutar funkcije (scope).
Recimo imam u this.xx nešto i to želim u funkciji nekoj, ali mi nije dostupno.


javascript code
function test()
{
var self = this;
this.a = function()
{
self.go();
}
this.go = function(){}
}


Nadam se da ovo pomaže donekle. Ukoliko imaš dodatnih pitanja pitaj, valjda budem mogao odgovoriti :)

Pozdrav
"Ne žalim što su drugi pokrali moje ideje. Žalim što nemaju svoje"
Nikola Tesla

Re: Javascript OOP

PostPostao/la webmaster » 25 svi 2014, 22:54

hvala na tako brzom odogovoru

sad trebam to procitati/isprobati par puta dok ne sjedne u glavu :)

Korisim ExtJs 3.4 framework i ponekad je užasno teško skužiti neke stvari :(

Lp


3 post(ov)a • Stranica: 1/1.

Na mreži

Trenutno korisnika/ca: / i 1 gost.