Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Object Oriented JavaScript

456 views

Published on

Published in: Technology, Self Improvement
  • Be the first to comment

  • Be the first to like this

Object Oriented JavaScript

  1. 1. Object Oriented JavaScript JavaScript is one of the cornerstones to the powerful set of tools made available by HTML5 JavaScript is a flexible and expressive language that should be written clearly and concisely.  Embrace the principles of OO design and how prototypical languages like JavaScript fit into this paradigm. 
  2. 2. Remember Why? <ul><li>Just to name some of the reasons... </li></ul><ul><ul><li>Encapsulation </li></ul></ul><ul><ul><li>Composition </li></ul></ul><ul><ul><li>Inheritance </li></ul></ul><ul><ul><li>Polymorphism </li></ul></ul>
  3. 3. Prototype Based Language <ul><ul><li>No formal class defn. </li></ul></ul><ul><ul><li>Objects are prototypes </li></ul></ul><ul><ul><li>Inheritance through  </li></ul></ul><ul><ul><ul><li>cloning </li></ul></ul></ul><ul><ul><ul><li>ex nihilo &quot;from nothing&quot; </li></ul></ul></ul>
  4. 4. Instance Objects <ul><li>BaseSoup = function() { </li></ul><ul><li>    name = &quot;simple soup&quot;; </li></ul><ul><li>    price = 7.00; </li></ul><ul><li>    ingredients = [&quot;water&quot;, &quot;salt&quot;, &quot;m irepoix&quot; ]; </li></ul><ul><li>} </li></ul><ul><li>BaseSoup.prototype.menuDisplay = function() { </li></ul><ul><li>    return name.concat(&quot; &quot;).concat(price); </li></ul><ul><li>} </li></ul><ul><li>var soup = new BaseSoup(); </li></ul><ul><li>soup.menuDisplay(); </li></ul>
  5. 5. Composition, Private Methods... <ul><li>BaseSoup = function() { </li></ul><ul><li>    name = &quot;simple soup&quot;; </li></ul><ul><li>    priceMgr = new PriceManager(); </li></ul><ul><li>    ingredients = [&quot;water&quot;, &quot;salt&quot;, &quot;m irepoix&quot; ];  </li></ul><ul><li>    price = function() { </li></ul><ul><li>        return priceMgr.price(this);         </li></ul><ul><li>    } </li></ul><ul><li>} </li></ul><ul><li>BaseSoup.prototype.menuDisplay = function() { </li></ul><ul><li>    return name.concat(&quot; &quot;).concat(price()); </li></ul><ul><li>} </li></ul>
  6. 6. Inheritance <ul><li>CrabBisque = function() {}; </li></ul><ul><li>//Lets inherit from the BaseSoup object from the previous slides </li></ul><ul><li>CrabBisque.prototype = new    BaseSoup; </li></ul><ul><li>CrabBisque . prototype.constructor =    CrabBisque; </li></ul><ul><li>CrabBisque . prototype.parent = BaseSoup.prototype; </li></ul><ul><li>CrabBisque.prototype.description = function() { </li></ul><ul><li>    return &quot;Delicious crab in a rich cream broth&quot;; </li></ul><ul><li>} </li></ul><ul><li>var bisque = new CrabBisque(); </li></ul><ul><li>bisque.menuDisplay(); </li></ul>
  7. 7. Polymorphic Jackpot <ul><li>CrabBisque = function() { </li></ul><ul><li>    name = &quot;Crab Bisque&quot;; </li></ul><ul><li>    ingredients = [&quot;salt&quot;, &quot;m irepoix&quot;,  </li></ul><ul><li>                                   &quot;heavy cream &quot;, &quot;crab&quot;, &quot;butter&quot;, </li></ul><ul><li>                                    &quot;leeks&quot;, &quot;pepper&quot;, &quot;tomato paste&quot;];  </li></ul><ul><li>}; </li></ul><ul><li>CrabBisque.prototype = new BaseSoup; </li></ul><ul><li>CrabBisque . prototype.constructor =   CrabBisque; </li></ul><ul><li>CrabBisque . prototype.parent = BaseSoup.prototype; </li></ul><ul><li>var bisque = new CrabBisque(); </li></ul><ul><li>bisque.display(); </li></ul><ul><li>bisque.description(); </li></ul>
  8. 8. Soup? Inspiration.
  9. 9. <ul><li>CrabBisque = function() { </li></ul><ul><li>     BaseSoup.call(this);   //call the super object constructor </li></ul><ul><li>    name = &quot;Crab Bisque&quot;; </li></ul><ul><li>    ingredients = [&quot;salt&quot;, &quot;m irepoix&quot;,  </li></ul><ul><li>                                   &quot;heavy cream &quot;, &quot;crab&quot;, &quot;butter&quot; </li></ul><ul><li>                                    &quot;leeks&quot;, &quot;pepper&quot;, &quot;tomato paste&quot;];  </li></ul><ul><li>}; </li></ul><ul><li>CrabBisque.prototype.description = function() { </li></ul><ul><li>    return BaseSoup.prototype.description.call(this); //call the super method </li></ul><ul><li>} </li></ul>call ~ super
  10. 10. &quot;From Nothing&quot; <ul><li>var lunch = {soup: new Jambalaya(), bread: true,  </li></ul><ul><li>drink: &quot;Coke&quot;, burp: function() { return &quot;yum&quot;}}; </li></ul>
  11. 11. <ul><li>SoupFactory = (function() { </li></ul><ul><li>    return { </li></ul><ul><li>        serve: function(person) { </li></ul><ul><li>            switch(person.name()) { </li></ul><ul><li>                case &quot;Newman&quot;: </li></ul><ul><li>                    return new Jambalaya();  </li></ul><ul><li>                case &quot;George&quot;: </li></ul><ul><li>                    return new CrabBisque(); </li></ul><ul><li>                case &quot;Elaine&quot;: </li></ul><ul><li>                    return new Mulligatawny(); </li></ul><ul><li>                default: </li></ul><ul><li>                    return new LimaBean(); </li></ul><ul><li>            } </li></ul><ul><li>        } </li></ul><ul><li>    } </li></ul><ul><li>})(); </li></ul>Static Objects
  12. 12. Closures / Anonymous Functions <ul><li>//function in a function </li></ul><ul><li>//retains a copy of the local variable despite being an anon function </li></ul><ul><li>FatCat = function() { </li></ul><ul><li>    var weight = 4; </li></ul><ul><li>    this.eat = function() { weight++; }; </li></ul><ul><li>    this.weighIn = function() { alert(weight); }; </li></ul><ul><li>    this.speak = function() { </li></ul><ul><li>        kittyTalk = function() { alert(meow); } </li></ul><ul><li>        //NOTE: meow is defined _after_ the anon above...it still works! </li></ul><ul><li>        var meow = &quot;Meeeooww&quot;; </li></ul><ul><li>        return kittyTalk; //just got functional  </li></ul><ul><li>     } </li></ul><ul><li>} </li></ul>
  13. 13. Functional Sprinkles of Goodness <ul><li>function each(arrayOfStuff, action) { </li></ul><ul><li>    for(var i = 0; i < arrayOfStuff.length; i++) { </li></ul><ul><li>        action(arrayOfStuff[i]); </li></ul><ul><li>    } </li></ul><ul><li>} </li></ul><ul><li>each([1,2,3,4,5], alert); </li></ul>

×