Object Oriented JavaScript

429 views
389 views

Published on

Published in: Technology, Self Improvement
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
429
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • I threw the HTML5 logo on here because I feel that JavaScript is one of the key cornerstones to the powerful set of tools available. It is becoming more important to write excellent, clear, and concise JavaScript code.  We need to embrace the principles of OO design and  prototypical languages like JavaScript fit into this paradigm.  
  • Arrow One:  Typical instance based "constructor". Define properties which are private and not visible to the outside world. Encapsulation! Arrow Two: Note the "prototype" keyword. Used to add methods to our Product prototype object. Using the internal properties to define the method output. Arrow Three: Instantiation with the "new" keyword. Invocation of the display instance method.
  • Arrow One:  Use of composition with the PriceManager. Proper responsibility has been delegated to the appropriate object. Definition of a private method.
  • Arrow One:  More use of the word prototype for inheritance. Inheritance is a bit clunky but can be simplified by creating a simple helper library to facilitate the mechanism. __proto__ vs. prototype
  • Arrow One:  We overrode the description method, but we the rest of the implementation from the prototypical parent objects.
  • Arrow One:  We overrode the description method, but we the rest of the implementation from the prototypical parent objects.
  • Arrow One:  Typical instance based "constructor". Define properties which are private and not visible to the outside world. Encapsulation! Arrow Two: Note the "prototype" keyword. Used to add methods to our Product prototype object. Using the internal properties to define the method output. Arrow Three: Instantiation with the "new" keyword. Invocation of the display instance method.
  • Arrow One:  We overrode the description method, but we the rest of the implementation from the prototypical parent objects.
  • Arrow One:  We overrode the description method, but we the rest of the implementation from the prototypical parent objects.
  • Arrow One:  We overrode the description method, but we the rest of the implementation from the prototypical parent objects.
  • 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>

    ×