Object Oriented JavaScript

1,766 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
1,766
On SlideShare
0
From Embeds
0
Number of Embeds
738
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Object Oriented JavaScript

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

×