Thursday, April 22, 2010

Easy Breezy Javascript OOP

Javascript does not support classical OOP. Instead it supports prototypal inheritance. It seems that everybody still wants to use the classical OOP pattern though and I don't really blame them. I use it all the time in my own projects and I see it used in many of the libraries and frameworks out there. Some people think that classical OOP has no place in Javascript, but I and many others respectfully disagree.

Despite the numerous tutorials on the web, many people still ask what is the proper way to do classical OOP. I'm not sure if the issue is the quality of the tutorials or the myriad of ways to simulate classes. In any case, I feel that there is room for one more quick tutorial. I do not claim this way to be the "proper" way, but I do feel that it is a "good" way. Many people and libraries/frameworks use this pattern or something very close to it

Classes and the Constructor

Defining a class and it's constructor function is easy. It looks like this:

// create a class called Animal
var Animal = function(name, age) { 
    // assign the passed-in arguments to instance members
    this.name = name; 
    this.age = age;
};

Using this class is also easy:

// create an instance and assign it to the pet variable
var pet = new Animal("Spot", 2);

Instance Methods

To add an instance method, you want to use the prototype property. It looks like this:

// create an instance method called "sayHello"
Animal.prototype.sayHello = function() {
    // access instance members using the "this" keyword
    return this.name + " doesn't speak.";
};

To use an instance method, you can simply call it on the instance:

// make the animal say hello
pet.sayHello(); // returns "Spot doesn't speak."

Static Methods

Static methods are applied to directly to the class like so:

// create a static method called "getName"
Animal.getName = function(animal) {
    // return the name of the passed-in animal
    return animal.name;
};

When using a static method, you use the class:

// call the static method
Animal.getName(pet); // returns "Spot"

Subclassing

This is usually the sticky point and where many implementations differ slightly (or not-so-slightly). Like I said, I think the way I present is a good way though. It requires one little helper function.

var extend = function(subClass, parentClass) {
    var tempFn = function() {};
    tempFn.prototype = parentClass.prototype;
    subClass.prototype = new tempFn();
    subClass.prototype.constructor = subClass;
    subClass.superclass = parentClass.prototype;
};

The what, why and how are beyond the scope of this article, but I certainly encourage you to do deeper digging if you are so inclined. Using the function is rather easy though.

// create a new class called "Dog"
var Dog = function(name, age) {
    // call the constructor of the superclass
    Dog.superclass.constructor.call(this, name, age);
};

// explicitly make Dog subclass Animal
extend(Dog, Animal);

Instance Methods

To add new instance methods, just add them to the prototype of the subclass:

// create an instance method called "bark"
Dog.prototype.bark = function() {
    return "Woof!";
};

To override instance methods, and to call superclass methods, do this:

// override the instance method called "sayHello"
Dog.prototype.sayHello = function() {
    if (this.age < 1) {
        // call the super "sayHello" method
        return Dog.superclass.sayHello.call(this);
    }
    else {
        return this.bark();
    }
}

Using instance methods on the subclass works exactly like before:

var petDog = new Dog("Spot", 2);

// make the animal say hello
petDog.sayHello(); // returns "Woof!"

That's really about it. It's simple and doesn't include many things like interfaces or private members, but it works. And that's how you do easy breezy Javascript OOP.

15 comments:

  1. patriots jerseys, http://www.newenglandpatriotsjerseys.us/
    saints jerseys, http://www.neworleanssaintsjerseys.us/
    fitflop, http://www.fitflop.in.net/
    karen millen uk, http://www.karenmillendressesoutlets.co.uk/
    air jordan 11 free shipping, http://www.airjordan11.net/
    hollister canada, http://www.hollistercanada.com/
    hollister uk, http://www.hollistershirts.co.uk/
    tods outlet, http://www.todsoutlet.us.com/
    air jordan 4 free shipping, http://www.airjordan4.org/
    pandora jewelry, http://www.pandora.eu.com/
    coach outlet online, http://www.coachoutletstores.com.co/
    tiffany and co, http://www.tiffanyandco.in.net/
    prada outlet, http://www.pradaoutlet.us/
    ravens jerseys, http://www.baltimoreravensjerseys.us/
    supra shoes, http://www.suprashoes.us.com/
    hogan,hogan outlet,scarpe hogan,hogan sito ufficiale,hogan interactive
    michael kors outlet, http://michaelkors.outletonlinestores.us.com/
    juicy couture tracksuit, http://www.juicycoutureoutlet.net/
    chicago bulls, http://www.chicagobullsjerseys.net/
    jets jersey, http://www.newyorkjetsjersey.us/
    cai2015912

    ReplyDelete
  2. 威哥王:http://www.akanpo.net/
    女性媚薬:http://xn--19zl5rhf.akanpo.net/
    紅蜘蛛:http://xn--19zl5rhf.akanpo.net/
    花痴:http://www.xn--6qs44kv2wxulv8l.com/
    巨人倍増:http://www.xn--gmq15an1qquf7nnhnq.net/
    威哥王:http://www.akanpo.net/product/299.html
    威哥王:http://www.xn--y5q18fdwfi85apu0a.com/
    女性用精力剤:http://www.xn--o0q550b5sivv6a3ud.com/
    催淫剤:http://www.xn--o0q550b5sivv6a3ud.com/
    催淫薬:http://www.xn--o0q550b5sivv6a3ud.com/
    中絶薬:http://www.xn--fiqs66igff.net/
    五夜神:http://www.xn--dlqq0x36z.com/
    三便宝:http://www.xn--ehqp5bbzdjgv52b5n2c.com/
    蟻力神:http://www.xn--tfry51gvxj8qe33e.com/
    三体牛鞭:http://www.xn--ehq44ay28e5g5a.net/
    三體牛鞭:http://www.xn--ehq44ay28e5g5a.net/
    勃動力三體牛鞭:http://www.xn--ehq44ay28e5g5a.net/
    五便宝:http://www.xn--dlq51ag0z.com/
    狼一号:http://www.xn--4gq48lvu4a.net/
    狼1号:http://www.xn--4gq48lvu4a.net/
    ビグレックス:http://www.xn--pckb2a1b0esh.com/
    VigRx:http://www.xn--pckb2a1b0esh.com/
    徳国黒金:http://www.xn--vcsp6r0y7bp4k.net/
    蔵秘男宝:http://www.xn--pbtr90dtidpyo.com/
    中華牛鞭:http://www.xn--fiqx59fy7lwts.net/
    蔵秘雄精:http://www.xn--tmz82dyzk01s.com/
    蔵秘男宝:http://www.xn--pbtr90dtidpyo.net/
    男宝:http://www.xn--pbtr90d.net/
    ナンパオ:http://www.xn--pbtr90d.net/
    好漢哥:http://www.xn--kwrt0i78w.com/
    三鞭粒:http://www.xn--ehq774i08q.com/
    魔根:http://www.xn--xxvo15i.com/
    壮三天:http://www.xn--ehq78xdf.com/

    媚薬通販:http://www.akanpo.net/catalog/60.html
    催淫カプセル:http://www.akanpo.net/product/339.html
    淫インモラル:http://www.akanpo.net/product/477.html
    花痴:http://www.akanpo.net/product/325.html
    花痴:http://www.akanpo.net/product/109.html
    紅蜘蛛:http://www.akanpo.net/product/110.html
    妖姫:http://www.akanpo.net/product/476.html
    D10媚薬:http://www.akanpo.net/product/315.html
    D10催情剤:http://www.akanpo.net/product/315.html
    催情剤:http://www.akanpo.net/product/315.html
    D8 催情剤:http://www.akanpo.net/product/81.html
    絶對高潮:http://www.akanpo.net/product/339.html
    FLY D5:http://www.akanpo.net/product/102.html
    蒼蝿水:http://www.akanpo.net/product/102.html
    D5原液:http://www.akanpo.net/product/102.html
    レディーチャイナ:http://www.akanpo.net/product/102.html
    催情丹:http://www.akanpo.net/product/443.html
    天天素:http://www.akanpo.net/product/251.html
    韓国痩身一号:http://www.akanpo.net/product/208.html
    韓国痩身1号:http://www.akanpo.net/product/208.html
    痩身1号:http://www.akanpo.net/product/208.html
    巨人倍増:http://www.akanpo.net/product/36.html
    三便宝:http://www.akanpo.net/product/233.html
    蟻力神:http://www.akanpo.net/product/154.html
    蟻力神(第五代):http://www.akanpo.net/product/86.html
    三體牛鞭:http://www.akanpo.net/product/91.html
    勃動力三體牛鞭:http://www.akanpo.net/product/91.html
    三体牛鞭:http://www.akanpo.net/product/91.html
    中華牛鞭:http://www.akanpo.net/product/134.html
    RU486:http://www.akanpo.net/product/232.html
    MaxMan:http://www.akanpo.net/product/246.html
    蔵八宝:http://www.akanpo.net/product/449.html
    新一粒神:http://www.akanpo.net/product/448.html
    五便宝:http://www.akanpo.net/product/381.html
    狼一号:http://www.akanpo.net/product/92.html
    狼1号:http://www.akanpo.net/product/92.html
    黒倍王:http://www.akanpo.net/product/85.html
    アフリカ超人:http://www.akanpo.net/product/569.html
    徳国公牛:http://www.akanpo.net/product/658.html
    壮根精華素:http://www.akanpo.net/product/130.html
    街頭覇王睾丸素:http://www.akanpo.net/product/653.html
    精力剤:http://www.akanpo.net/catalog/1.html
    漢方薬:http://www.akanpo.net/catalog/2.html
    中絶 薬:http://www.akanpo.net/catalog/3.html
    経口避妊薬:http://www.akanpo.net/catalog/3.html
    催淫剤:http://www.akanpo.net/catalog/63.html
    催情薬:http://www.akanpo.net/catalog/63.html
    女性用媚薬:http://www.akanpo.net/catalog/60.html
    女性用精力剤:http://www.akanpo.net/catalog/60.html
    ペニス増大:http://www.akanpo.net/catalog/13.html

    ReplyDelete
  3. 精力剤販売:http://www.hakanpo.com/
    威哥王:http://www.hakanpo.com/p/pro96.html
    巨人倍増:http://www.hakanpo.com/p/pro138.html
    三體牛鞭:http://www.hakanpo.com/p/pro331.html
    勃動力三體牛鞭:http://www.hakanpo.com/p/pro331.html
    三体牛鞭:http://www.hakanpo.com/p/pro331.html
    狼1号:http://www.hakanpo.com/p/pro330.html
    狼一号:http://www.hakanpo.com/p/pro330.html
    三便宝:http://www.hakanpo.com/p/pro149.html
    五便宝:http://www.hakanpo.com/p/pro157.html
    蟻力神:http://www.hakanpo.com/p/pro132.html
    蟻力神(第五代):http://www.hakanpo.com/p/pro336.html
    新一粒神:http://www.hakanpo.com/p/pro476.html
    男宝:http://www.hakanpo.com/p/pro375.html
    魔根:http://www.hakanpo.com/p/pro360.html
    壮天根:http://www.hakanpo.com/p/pro329.html
    花痴:http://www.hakanpo.com/p/pro312.html
    妖姫:http://www.hakanpo.com/p/pro481.html
    絶對高潮:http://www.hakanpo.com/p/pro274.html
    D10媚薬:http://www.hakanpo.com/p/pro282.html
    D10催情剤:http://www.hakanpo.com/p/pro282.html
    淫インモラル:http://www.hakanpo.com/p/pro482.html
    紅蜘蛛:http://www.hakanpo.com/p/pro311.html
    紅蜘蛛:http://xn--19zl5rhf.hakanpo.com/
    福源春:http://hakanpo.com/p/pro372.html
    天天素:http://www.hakanpo.com/p/pro58.html
    曲美:http://www.hakanpo.com/p/pro25.html
    催淫カプセル:http://www.hakanpo.com/p/pro133.html
    三鞭粒:http://www.hakanpo.com/p/pro450.html
    黒倍王:http://www.hakanpo.com/p/pro337.html
    VigRx:http://www.hakanpo.com/p/pro222.html
    RU486:http://www.hakanpo.com/p/pro113.html
    MaxMan:http://www.hakanpo.com/p/pro97.html
    中華牛鞭:http://www.hakanpo.com/p/pro167.html
    D8 催情剤:http://www.hakanpo.com/p/pro343.html
    FLY D5:http://www.hakanpo.com/p/pro318.html
    D5原液:http://www.hakanpo.com/p/pro318.html
    蒼蝿水:http://www.hakanpo.com/p/pro318.html
    花之欲:http://www.hakanpo.com/p/pro292.html
    美人豹:http://www.hakanpo.com/p/pro320.html
    韓国痩身一号:http://hakanpo.com/p/pro20.html
    韓国痩身1号:http://hakanpo.com/p/pro20.html
    痩身一号:http://hakanpo.com/p/pro20.html
    痩身1号:http://hakanpo.com/p/pro20.html
    V26:http://www.hakanpo.com/p/pro48.html
    催情剤:http://www.hakanpo.com/p/pro282.html
    催情粉:http://www.hakanpo.com/p/pro288.html
    女性催情剤:http://www.hakanpo.com/CL05
    催情薬:http://www.hakanpo.com/p/pro159.html
    催淫:http://www.hakanpo.com/p/pro133.html
    催淫通販:http://www.hakanpo.com/p/pro133.html
    西班牙昆虫粉:http://www.hakanpo.com/p/pro316.html

    ReplyDelete
  4. 精力剤:http://www.feelkanpo.com/
    威哥王:http://xn--kwrt2jp9z.feelkanpo.com/
    威哥王:http://www.feelkanpo.com/view/415.html
    三體牛鞭:http://www.feelkanpo.com/view/812.html
    勃動力三體牛鞭:http://www.feelkanpo.com/view/812.html
    三体牛鞭:http://www.feelkanpo.com/view/812.html
    三便宝:http://www.feelkanpo.com/view/823.html
    男宝:http://www.feelkanpo.com/view/634.html
    五便宝:http://www.feelkanpo.com/view/797.html
    巨人倍増:http://www.feelkanpo.com/view/427.html
    狼1号:http://www.feelkanpo.com/view/501.html
    狼一号:http://www.feelkanpo.com/view/501.html
    蟻力神:http://www.feelkanpo.com/view/604.html
    蟻力神(第五代):http://www.feelkanpo.com/view/785.html
    新一粒神:http://www.feelkanpo.com/view/821.html
    蔵八宝:http://www.feelkanpo.com/view/820.html
    黒倍王:http://www.feelkanpo.com/view/575.html
    ru486:http://www.feelkanpo.com/view/407.html
    中絶薬RU486:http://www.feelkanpo.com/view/407.html
    縮陰膏:http://www.feelkanpo.com/view/636.html
    天天素:http://www.feelkanpo.com/view/573.html
    V26:http://www.feelkanpo.com/view/566.html
    曲美:http://www.feelkanpo.com/view/847.html
    福源春:http://www.feelkanpo.com/view/798.html
    紅蜘蛛:http://www.feelkanpo.com/view/473.html
    花痴:http://www.feelkanpo.com/view/593.html
    妖姫:http://www.feelkanpo.com/view/851.html
    淫インモラル:http://www.feelkanpo.com/view/849.html
    D10 媚薬:http://www.feelkanpo.com/view/479.html
    D10催情剤:http://www.feelkanpo.com/view/479.html
    絶對高潮:http://www.feelkanpo.com/view/561.html
    韓国痩身一号:http://www.feelkanpo.com/view/491.html
    漢方会社:http://www.kanpocom.com/
    威哥王:http://xn--kwrt2jp9z.kanpocom.com/
    威哥王:http://www.kanpocom.com/Pro/weigewang.html
    巨人倍増:http://www.kanpocom.com/pro/jurenbeiceng.html
    紅蜘蛛:http://www.kanpocom.com/Pro/hong-zhi-zhu.html
    花痴:http://www.kanpocom.com/Pro/huachi.html
    D10催情剤:http://www.kanpocom.com/pro/D10.html
    絶對高潮:http://www.kanpocom.com/Pro/juedui.html
    三便宝:http://www.kanpocom.com/pro/satibo-capsules.html
    三體牛鞭:http://www.kanpocom.com/Pro/stlb.html
    勃動力三體牛鞭:http://www.kanpocom.com/pro/stlb.html
    三体牛鞭:http://www.kanpocom.com/Pro/stlb.html
    蟻力神:http://www.kanpocom.com/pro/yilishen.html
    五便宝:http://www.kanpocom.com/Pro/wodibo-capsules.html
    狼一号:http://www.kanpocom.com/Pro/langyihao.html
    狼1号:http://www.kanpocom.com/Pro/langyihao.html
    RU486:http://www.kanpocom.com/pro/beijing-ru486.html
    消渇丸:http://www.kanpocom.com/Pro/xiaokewan.html
    天天素:http://www.kanpocom.com/pro/tiantiansu.html
    V26:http://www.kanpocom.com/Pro/V26sx.html
    韓国痩身1号:http://www.kanpocom.com/Pro/hgshs.html
    韓国痩身一号:http://www.kanpocom.com/Pro/hgshs.html
    媚薬 販売:http://www.allkanpou.com/
    花痴:http://www.xn--6qs44kv2wxulv8l.com/
    淫インモラル:http://www.allkanpou.com/product/immoral.html
    花痴:http://www.allkanpou.com/product/%E8%8A%B1%E7%97%B4.html
    威哥王:http://www.allkanpou.com/product/%E5%A8%81%E5%93%A5%E7%8E%8B.html
    巨人倍増:http://www.allkanpou.com/product/%E5%B7%A8%E4%BA%BA%E5%80%8D%E5%A2%97.html
    催情丹:http://www.allkanpou.com/product/cuiqingj.html
    媚薬:http://www.allkanpou.com/biyaku/%E5%AA%9A%E8%96%AC.html
    媚薬通販:http://www.allkanpou.com/biyaku/%E5%AA%9A%E8%96%AC.html
    女性媚薬:http://www.allkanpou.com/biyaku/%E5%A5%B3%E6%80%A7%E5%AA%9A%E8%96%AC.html
    媚薬激安:http://www.allkanpou.com/biyaku/%E5%A5%B3%E6%80%A7%E5%AA%9A%E8%96%AC.html
    媚薬カプセル:http://www.allkanpou.com/biyaku/%E5%AA%9A%E8%96%AC%E5%82%AC%E6%B7%AB.html
    淫インモラル:http://immoral.yahookanpou.com/
    妖姫:http://xn--vvsqh.yahookanpou.com/
    媚薬カプセル:http://www.yahookanpou.com/catalog/60.html
    女性用媚薬:http://www.yahookanpou.com/catalog/60.html
    威哥王:http://www.yahookanpou.com/product/weigwang.html
    巨人倍増:http://www.yahookanpou.com/product/jurenbeizenggouqi.html
    三便宝:http://www.yahookanpou.com/product/sbb.html
    壮根精華素:http://www.yahookanpou.com/product/zgjhs.html
    韓国痩身一号:http://www.yahookanpou.com/product/hgssyhmtx.html
    韓国痩身1号:http://www.yahookanpou.com/product/hgssyhmtx.html
    精力剤:http://www.yahookanpou.com/
    巨人倍増:http://www.xn--tckuez55h0fbkxjnoie3j.com/
    妊娠中絶薬:http://www.xn--fiqv0z4mai18ikui.com/
    プロコミルスプレー:http://www.xn--tckm2gc2b7djc5l.com/
    催情薬:http://www.xn--o0q550b.net/
    レビトラ:http://www.xn--fdkva1ej2834bwg0a.com/
    d10媚薬:http://www.xn--d10-hl9e441q.com/
    韓国痩身一号:http://www.xn--4gq48lkwcy40cp4z0ql.com/
    蒼蝿粉:http://www.xn--i6zw1ov9b.com/
    催情丹:http://www.xn--riq92di5x.com/
    絶對高潮:http://www.xn--wetw46b3hk0yo36dn8t.com/

    ReplyDelete
  5. Quester is a Pakistan-based questioning answering website where people can ask questions and we try our best to provide them with the best answers. Anyone can ask any legit question in English or Roman Urdu and we provide answers in the same language format. www.quester.pk

    ReplyDelete