Pisanje objektnega javascripta

Zanimivo je, da izjemno veliko profesionalcev uporablja javascript pri programiranju kot proceduralen jezik. Dostikrat programiramo kompleksne dele PHP kode kjer uporabljamo “interface”, “classe” in ostalo kompleksno logiko ampak pri javascriptu pa na to nekako pozabimo in uporabljamo samo funkcije, kot da bi bili v otroškem vrcu.

No vsaj pri meni je bilo tako, dokler se nisem vprašal zakaj to počnem.

Ali je JavaScript res tako “neumen” jezik, da ne podpira modernega objektnega pristopa. Moram res kodirat na tako neumen način samo zato ker me v to potisne omejitev jezika.

Odgovor je NE…

JavaScript podpira objektno programiranje in z njim se lahko izražamo na skoraj isti način kot v vsakem drugem modernem programskem jeziku ampak pozabite na razrede(načrte objektov) in se pripravite na nerodno izvenzemeljsko sintakso, ki se jo boste morali prisilno naučiti.

function Rectangle(w,h) {
 this.width = w;
 this.height = h;
}
Rectangle.prototype.area = function() {
  return (this.width * this.height);
}

Zakaj je ime funkcije z veliko začenico?! in kaj prototipiram… Nočem ničesar prototipirat… Ustvarjam aplikacijo in ne prototipa, kaj pomeni ta beseda… Kaj počne ta beseda v Javascriptu. Edin moj cilj je narediti razred nekaj spremenljivk in metod kot v PHP primeru spodaj:

class Rectangle{
private $width;
private $height;

 function __construct($w,$h){
    $this->width = $w;
    $this->height =$h;
  }
  function area(){
    return ($this-> width * $this-> height);
  }
}

Po krajšem raziskovanju sem počasi doumel da Javascript ne uporablja razredov ampak samo objekte. To pomeni da ni nobene rezervirane besede class in vse kar imaš so živi objekti in ne načrti objektov. Prvo moraš ustvariti objekt:

function Rectangle(w,h) {
  this.width = w;
  this.height = h;
}

Ustvaril sem objekt Rectangle in telo funkcije služi kot constructor. Javascript nima rezerviranje besede za konstruktor.

Ko želiš dodati metodo k objektu moraš uporabiti besedo prototype in nato za “piko” ime metode in ustvariti anonimno funkcijo kot v naslednjem primeru:

Rectangle.prototype.area = function(params...) {
...
}

Ok, smo preživeli do sem… Lahko ustvarim objetkte s funkcijami ampak še zmeraj potrebujem dedovanje in tukaj stvari postanejo zelo čudne…

V normalnem jeziku bi rekel..
class1 extends class2 ali class1 implements class2 če implementiraš interface

Ampak ne v Javascriptu….

Tukaj te čaka naslednja znešnjava:

function DepthRectangle(w,h,d) {
 Rectangle.call(this,w,h);
 this.depth = d;
}
DepthRectangle.prototype = new Rectangle();
DepthRectangle.prototype.constructor = DepthRectangle;
DepthRectangle.prototype.volume = function() {
    return (this.area() * this.depth);
}

Ko sem to prvič videl sem hotel samo zbisati… Ampak tako deluje dedovanje v Javascriptu…

Potrebno je definirati objekt otroka(DepthRectangle) in poklicati konstruktor starša(Rectangle) in za tem dodati lastno kodo v konstruktor.

Potrebno je nastaviti prototype od otroka(DepthRectangle) na starša(Rectangle)
To pomeni da bo prototipni objekt starš sam.
Nato je potrebno konstruktor nastavit nazaj na otroka.

DepthRectangle.prototype = new Rectangle();
DepthRectangle.prototype.constructor = DepthRectangle;

Ni mi všeč ampak deluje…
Sedaj imamo dedovanje in s tem lahko pišemo lepšo in bolj organizirano kodo…
Lepšo seveda če tisti, ki bere za nami pozna JavaScript objektno sintakso

Za tem samo dodaš s prototype besedo svojo fukcijo otroku(DepthRectangle)

DepthRectangle.prototype.volume = function();

And that you just need to use that object and that is it.

var myDeepRect = new DepthRectangle(7,8,9);
alert(myDeepRect.volume());

Obstaja zelo dober tutorial in razlaga o javascriptu http://www.lynda.com/JavaScript-tutorials/practical-and-effective-javascript/781-2.html
Od tam sem uporabil tudi te primere saj so “enostavni” za razumevanje.

Igral sem se s koncepti in kodo in ustvaril design patern “Strategy” v javascriptu. Če si zainterisiran si ga lahko naložiš tukaj(strategija). Good luck…