Konstruktorska funkcija za JavaScript objekte

Evo jednog prostog primera čija je svrha da ispitamo kako funkcioniše kreiranje objekta pomoću konstruktorske funkcije i pristup promenljivama/svojstvima. Najpre ćemo deklarisati funkciju klase tj. konstruktorsku funkciju.

U pitanju je klasa Robot. Svaki objekat robota koji napravimo pomoću ove klase, treba da ima ime (name) i energiju (energy), kao i mogućnost da se puni (charge) i kreće (move). Prva dva su svojstva, a duga dva metodi objekta. Pogledajmo osnovni kostur:

  function Robot(name)
  {
    this.name = name;  // svojstvo name dobija vrednost iz parametra pri pozivu funkcije
    this.energy = 100; // svojstvo energy dobija početnu vrednost 100

    this.charge = function() {      // metod objekta
      // robot puni bateriju
    };

    this.move = function(mX, mY) {  // metod objekta
      // robot se kreće za mX jedinica levo-desno i mY jedinica napred-nazad
    };
  }

  var r = new Robot("R2D2");  // KREIRANJE OBJEKTA

Hajde sada da malo "raščerečimo" ovu tehniku. Vidimo dve glavne stvari: deklaraciju funkcije Robot() i kreiranje objekta r. Funkcija Robot() nam praktično "glumi" klasu, pa smo je u tu čast nazvali velikim početnim slovom.

Prva naredba koja će se izvršiti je new Robot(...), koja predstavlja kreiranje objekta. Funkcioniše tako što se kreira novi prazan objekat, a onda se za njega poziva funkcija Robot(). To u stvari znači da će objekat this unutar funkcije Robot() biti taj naš novi objekat.

Zahvaljujući tome možemo definisati svojstva objekta this. To znači da kad otkucamo "this.nešto", to znači da našem objektu koji konstruišemo, "prilepimo" neko novo svojstvo. To svojstvo može imati običnu vrednost, a može biti i referenca na funkciju (tačnije referenca na bilo kakav objekat). U ovom primeru smo napravili reference na anonimne funkcije this.charge (punjenje robota) i this.move (kretanje robota). Ova svojstva se onda mogu koristiti kao metodi našeg objekta.

Promenljiva r postaje referenca na taj objekat i kasnije pomoću nje pristupamo svojstvima i metodima objekta.

  // KORIŠĆENJE OBJEKTA
  r.charge();       // punjenje
  r.move(15, 20);   // pomeranje za 15 jedinica u stranu i 20 jedinica napred
  r.energy = 500;   // možemo direktno zadati vrednost svojstva

Kada se poziva konstruktor Robot(), prosleđuje se ime robota ("R2D2"). Pošto je ovo na kraju krajeva, jedna obična funkcija, naravno da može imati parametre, što koristimo za inicijalizaciju našeg objekta. Nemojte da vas brine što imamo parametar name i svojstvo this.name - to su dve sasvim različite stvari. Ipak, nemojte da pravite lokalnu promenljivu (var name) sa istim imenom kao parametar - to bi dovelo do greške.

Objekat this

Hajde prvo da razjasnimo kako funkcioniše this kada dodajemo sa svojstva i metode. Obratite pažnju na sledeći isečak:

  function Robot(name)
  {
    var prom = 1;
    this.energy = 100;

    this.charge = function() {
      prom++;
      this.energy++;
    };
  }

Možda biste pomislili da this.energy "funkcioniše" unutar funkcije, zato što je to metod, takođe vezan za this - this.charge. U stvari ova dva this objekta su dve različite stvari. this.charge je bitno samo pri kreiranju objekta. To služi da se objektu (za koji je pozvana funkcija Robot) "zalepi" svojstvo charge. Svojstvo charge je referenca na funkciju (anonimnu), pa efektivno funkcioniše kao metod objekta.

Unutar te funkcije, imamo drugi objekat this gde radimo sa njegovim svojstvom energy. Ovaj this ima vrednost tek kada se funkcija pozove, i predstavlja kontekst funkcije. Uobičajeno, ova dva this objekta predstavljaju istu stvar, ali pogledajte sledeći izuzetak:

  var prvi = new Robot("Nešto");
  var drugi = new Robot("Drugo");
  
  prvi.charge.call(drugi);

Znamo da JavaScript omogućava da pri pozivu definišemo kontekst funkcije, odnosno objekat za koji se ona poziva, korišćenjem metoda call() i apply(). Ovde smo to primenili kako bismo pozvali metod charge() prvog objekta za drugi objekat. U tom slučaju, nastaje totalna zbrka - this unutar charge() je vezano za objekat drugi, ali unutrašnja promenljiva prom je iz objekta prvi, pošto je pri kreiranju objekta kreiran i closure. Proverite na samom primeru.

Privatne funkcije

Hajde da sada malo zakomplikujemo stvari. U "pravom životu" se često dešava da sami po sebi metodi budu suviše kompleksni ili da koriste jedan te isti deo programa koji se ponavlja, pa nam je lakše da njihovo izvršavanje razdelimo na funkcije. Kako ne bismo "prljali" ostatak programa, želećemo da te funkcije deklarišemo u "lokalu", tj. unutar funkcije klase. Ovo će biti privatne funkcije (a možemo isto tako dodati i promenljive), i biće sasvim dostupne metodima objekta.

Sve bi to bilo sasvim u redu, kada se ne bi desila sasvim uobičajena stvar - da nam u nekoj od tih privatnih funkcija zatreba da pozovemo neki metod ili da iskoristimo svojstvo objekta. Pokušaj da ovo uradimo prostim this.svojstvo dovešće do greške.

Pogledajte sada isečak u kome imamo privatnu funkciju, ali koja pristupa svojstvu objekta:

  function Robot()
  {
    var _self = this;
    var prom = 1;
    this.energy = 100;

    function fun() {
      prom++;          // u redu
      this.energy++;   // NEISPRAVNO!!!
      _self.energy++;  // ovako može
    }
  }

Problem je u tome što lokalna (privatna) funkcija, fun() ne može pristupati svojstvima i metodima objekta preko this. Ne zaboravite - this ne zavisi od deklaracije funkcije, već od njenog poziva!

Ovakav problem pristupa smo rešili tako što smo dodali novu promenljivu _self u koju na samom početku smeštamo objekat this. Pošto je ovo lokalna promenljiva, a ne svojstvo, unutrašnje funkcije joj pristupaju bez problema. Sa druge strane, pošto funkcioniše closure, promenljiva _self će zadržati referencu na objekat this iz vremena poziva funkcije Robot() (tj. konstrukcije objekta), pa će tako sve funkcije imati pristup objektu upravo preko promenljive _self.

Pogledajte kako sve to funkcioniše na "živom" primeru, gde smo primenili sve opisano.

Hajde da vidimo kako bi izgledao malopređašnji primer, ali u formi konstruktorske funkcije koja sama kreira objekat. Najprostiji slučaj, kada imamo samo svojstva i metode bi bio:

  function Robot(name) 
  {
    return {
      name: name,
      energy: 100,
      charge: function() {
        // punjenje robota
      },
      move: function(mX, mY) {
        // pomeranje robota
      }
    };
  }

  var r = Robot("R2D2");  // KREIRANJE OBJEKTA

Dakle, sve je isto, samo malo drugačije. Ovde kreiramo objekat preko litarala u koji smo odmah ubacili sva četiri svojstva - ime i energiju (name i energy), kao i svojstva koja su reference na funkcije - metode charge i move.

Kreiranje objekta se takođe sasvim malo razlikuje od prethodne verzije. Vidimo da se ne koristi operator new, već da se samo poziva funkcija Robot() koja će nam vratiti kreirani objekat.

Kada se sve to završi, korišćenje samog objekta u programu se nimalo ne razlikuje od prethodne varijante.

  // KORIŠĆENJE OBJEKTA
  r.charge();
  r.move(15, 20);
  r.energy = 500;

Uvođenje lokalnih promenljivih i privatnih funkcija nije problem.

  function Robot(name) 
  {
    var potez = 0;
    
    function provera() {...}
    
    return {
      name: name,
      energy: 100,
      charge: function() {
        provera();
      },
      move: function(mX, mY) {
        potez++;
      }
    };
  }

Malo je zeznutija situacija ako želimo da privatne funkcije takođe pristupaju svojstvima objekta. Sada moramo da prepakujemo ceo konstruktor.

  function Robot(name) 
  {
    var potez = 0;

    var _self = {
      name: name,
      energy: 100,
      charge: function() {
        plus();
      },
      move: function(mX, mY) {
        potez++;
      }
    };
    
    function plus() {
      _self.energy++;
    }
    
    return _self;
  }

Da bi closure funkcija plus() mogla da pristupi objektu, na njega mora da postoji konkretna referenca, ne možemo samo vratiti literal kao rezultat. Tako smo napravili referencu _self u kojoj smo definisali objekat, i koju na kraju vraćamo kao rezultat.

Naravno, ovde smo sami izabrali da se promenljiva zove _self (vodite računa, čisto "self" ima značenje u DOM programiranju, pa ga izbegavajte - zato smo mu i dodali donju crtu). Vi možete koristiti bilo koju promenljivu, s tim što pazite da je posle koristite za pristup objektu u svakoj privatnoj funkciji.

Pogledajte i primer...