SlideShare a Scribd company logo
Object Oriented JavaScript
 JavaScript is a flexible                              Embrace the principles of
and 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
Remember Why?

Just to name some of the reasons...
  Encapsulation
  Composition
  Inheritance
  Polymorphism
Prototype Based Language

No formal class defn.
Objects are prototypes
Inheritance through
  cloning
  ex nihilo "from nothing"
Instance Objects
BaseSoup = 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();
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());
}
Inheritance
CrabBisque = function() {};

//Lets inherit from the BaseSoup object from the previous slides
CrabBisque.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();
Polymorphic Jackpot
CrabBisque = 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();
Soup? Inspiration.
call ~ super
CrabBisque = 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
}
"From Nothing"
var lunch = {soup: new Jambalaya(), bread: true,
 drink: "Coke", burp: function() { return "yum"}};
Static Objects
SoupFactory = (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();
       }
     }
  }

})();
Closures / Anonymous Functions
//function in a function
//retains a copy of the local variable despite being an anon function
FatCat = 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
   }
}
Functional Sprinkles of Goodness
function each(arrayOfStuff, action) {

    for(var i = 0; i < arrayOfStuff.length; i++) {
       action(arrayOfStuff[i]);
    }

}

each([1,2,3,4,5], alert);

More Related Content

Viewers also liked (6)

PDF
MongoDB Part 2
techwhizbang
 
PDF
Let's earn some media by Jelle Kolleman, Red Urban
Hyves
 
PPTX
Continuous Delivery
Dmitry Buzdin
 
PPT
Making Pretty Charts in Splunk
Splunk
 
PDF
Red Urban presenteert succesvolle Hyvescampagnes & learnings
Hyves
 
PDF
An ASAP Validation Implementation Approach by Qualit Consulting
aesww
 
MongoDB Part 2
techwhizbang
 
Let's earn some media by Jelle Kolleman, Red Urban
Hyves
 
Continuous Delivery
Dmitry Buzdin
 
Making Pretty Charts in Splunk
Splunk
 
Red Urban presenteert succesvolle Hyvescampagnes & learnings
Hyves
 
An ASAP Validation Implementation Approach by Qualit Consulting
aesww
 

Similar to Object Oriented JavaScript (20)

PDF
Intro to Advanced JavaScript
ryanstout
 
KEY
Javascript tid-bits
David Atchley
 
PDF
Professional JavaScript Development - Creating Reusable Code
Wildan Maulana
 
PDF
JavaScript 1.5 to 2.0 (TomTom)
jeresig
 
PDF
Java Script Best Practices
Enrique Juan de Dios
 
KEY
JavaScript Growing Up
David Padbury
 
PDF
Js objects
anubavam-techkt
 
PDF
The Beauty of Java Script
Michael Girouard
 
PPT
Wakanday JS201 Best Practices
Juergen Fesslmeier
 
PDF
Orlando BarCamp Why Javascript Doesn't Suck
erockendude
 
PPTX
Object Oriented JavaScript
Julie Iskander
 
PDF
The many facets of code reuse in JavaScript
Leonardo Borges
 
PPT
Advanced JavaScript
Stoyan Stefanov
 
PDF
JavaScript Core
François Sarradin
 
PPTX
Framework prototype
DevMix
 
PPTX
Framework prototype
DevMix
 
PPTX
Framework prototype
DevMix
 
PPTX
Ajaxworld
deannalagason
 
PPT
Advanced Javascript
relay12
 
Intro to Advanced JavaScript
ryanstout
 
Javascript tid-bits
David Atchley
 
Professional JavaScript Development - Creating Reusable Code
Wildan Maulana
 
JavaScript 1.5 to 2.0 (TomTom)
jeresig
 
Java Script Best Practices
Enrique Juan de Dios
 
JavaScript Growing Up
David Padbury
 
Js objects
anubavam-techkt
 
The Beauty of Java Script
Michael Girouard
 
Wakanday JS201 Best Practices
Juergen Fesslmeier
 
Orlando BarCamp Why Javascript Doesn't Suck
erockendude
 
Object Oriented JavaScript
Julie Iskander
 
The many facets of code reuse in JavaScript
Leonardo Borges
 
Advanced JavaScript
Stoyan Stefanov
 
JavaScript Core
François Sarradin
 
Framework prototype
DevMix
 
Framework prototype
DevMix
 
Framework prototype
DevMix
 
Ajaxworld
deannalagason
 
Advanced Javascript
relay12
 
Ad

Recently uploaded (20)

PDF
Mastering Financial Management in Direct Selling
Epixel MLM Software
 
PPTX
The Project Compass - GDG on Campus MSIT
dscmsitkol
 
PDF
POV_ Why Enterprises Need to Find Value in ZERO.pdf
darshakparmar
 
PDF
New from BookNet Canada for 2025: BNC BiblioShare - Tech Forum 2025
BookNet Canada
 
DOCX
Cryptography Quiz: test your knowledge of this important security concept.
Rajni Bhardwaj Grover
 
PPTX
Webinar: Introduction to LF Energy EVerest
DanBrown980551
 
PPTX
WooCommerce Workshop: Bring Your Laptop
Laura Hartwig
 
PDF
[Newgen] NewgenONE Marvin Brochure 1.pdf
darshakparmar
 
PDF
CIFDAQ Token Spotlight for 9th July 2025
CIFDAQ
 
PDF
"AI Transformation: Directions and Challenges", Pavlo Shaternik
Fwdays
 
PDF
Jak MŚP w Europie Środkowo-Wschodniej odnajdują się w świecie AI
dominikamizerska1
 
PDF
Newgen 2022-Forrester Newgen TEI_13 05 2022-The-Total-Economic-Impact-Newgen-...
darshakparmar
 
PDF
CIFDAQ Market Insights for July 7th 2025
CIFDAQ
 
PDF
Transforming Utility Networks: Large-scale Data Migrations with FME
Safe Software
 
PDF
Go Concurrency Real-World Patterns, Pitfalls, and Playground Battles.pdf
Emily Achieng
 
PPTX
OpenID AuthZEN - Analyst Briefing July 2025
David Brossard
 
PDF
CIFDAQ Market Wrap for the week of 4th July 2025
CIFDAQ
 
PDF
Exolore The Essential AI Tools in 2025.pdf
Srinivasan M
 
PDF
Agentic AI lifecycle for Enterprise Hyper-Automation
Debmalya Biswas
 
PDF
IoT-Powered Industrial Transformation – Smart Manufacturing to Connected Heal...
Rejig Digital
 
Mastering Financial Management in Direct Selling
Epixel MLM Software
 
The Project Compass - GDG on Campus MSIT
dscmsitkol
 
POV_ Why Enterprises Need to Find Value in ZERO.pdf
darshakparmar
 
New from BookNet Canada for 2025: BNC BiblioShare - Tech Forum 2025
BookNet Canada
 
Cryptography Quiz: test your knowledge of this important security concept.
Rajni Bhardwaj Grover
 
Webinar: Introduction to LF Energy EVerest
DanBrown980551
 
WooCommerce Workshop: Bring Your Laptop
Laura Hartwig
 
[Newgen] NewgenONE Marvin Brochure 1.pdf
darshakparmar
 
CIFDAQ Token Spotlight for 9th July 2025
CIFDAQ
 
"AI Transformation: Directions and Challenges", Pavlo Shaternik
Fwdays
 
Jak MŚP w Europie Środkowo-Wschodniej odnajdują się w świecie AI
dominikamizerska1
 
Newgen 2022-Forrester Newgen TEI_13 05 2022-The-Total-Economic-Impact-Newgen-...
darshakparmar
 
CIFDAQ Market Insights for July 7th 2025
CIFDAQ
 
Transforming Utility Networks: Large-scale Data Migrations with FME
Safe Software
 
Go Concurrency Real-World Patterns, Pitfalls, and Playground Battles.pdf
Emily Achieng
 
OpenID AuthZEN - Analyst Briefing July 2025
David Brossard
 
CIFDAQ Market Wrap for the week of 4th July 2025
CIFDAQ
 
Exolore The Essential AI Tools in 2025.pdf
Srinivasan M
 
Agentic AI lifecycle for Enterprise Hyper-Automation
Debmalya Biswas
 
IoT-Powered Industrial Transformation – Smart Manufacturing to Connected Heal...
Rejig Digital
 
Ad

Object Oriented JavaScript

  • 1. Object Oriented JavaScript JavaScript is a flexible Embrace the principles of and 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. Remember Why? Just to name some of the reasons... Encapsulation Composition Inheritance Polymorphism
  • 3. Prototype Based Language No formal class defn. Objects are prototypes Inheritance through cloning ex nihilo "from nothing"
  • 4. Instance Objects BaseSoup = 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. 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. Inheritance CrabBisque = function() {}; //Lets inherit from the BaseSoup object from the previous slides CrabBisque.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. Polymorphic Jackpot CrabBisque = 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();
  • 9. call ~ super CrabBisque = 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. "From Nothing" var lunch = {soup: new Jambalaya(), bread: true, drink: "Coke", burp: function() { return "yum"}};
  • 11. Static Objects SoupFactory = (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. Closures / Anonymous Functions //function in a function //retains a copy of the local variable despite being an anon function FatCat = 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. Functional Sprinkles of Goodness function each(arrayOfStuff, action) { for(var i = 0; i < arrayOfStuff.length; i++) { action(arrayOfStuff[i]); } } each([1,2,3,4,5], alert);