07 object orientedjavascript
Upcoming SlideShare
Loading in...5
×
 

07 object orientedjavascript

on

  • 756 views

 

Statistics

Views

Total Views
756
Views on SlideShare
756
Embed Views
0

Actions

Likes
0
Downloads
9
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    07 object orientedjavascript 07 object orientedjavascript Presentation Transcript

    • OBJECT-ORIENTEDJAVASCRIPTA very high-level overview of the concepts
    • JavaScript is weird•  Dynamically typed•  Only three data types•  Functions can contain functions•  Objects created on the fly•  Strange local scoping•  All function parameters are optional
    • For example•  Functions within objects •  Functions within functionsvar p1 = {! var p2 = function() {! name: "Peter",! var name = "Quagmire";! var sing: function() {! var sing = function(){! song="Bird is the word";! alert(name +! alert(song);! "says Gigity gigity");! }! }!}! }!
    • Before we can understand objects, wehave to get Closures•  If you have thisvar x = "hello";!function sayHi(name) {! var greeting = x;! console.log(greeting, name);!}!•  Then x goes away and we do this:sayHi("world");!•  What happens?
    • And now, back to our regularly scheduled program ...
    • To be OO, we need certain things•  Objects•  Classes•  Properties•  Methods•  Constructors•  Overloading•  Inheritance•  Interfaces•  Namespaces
    • Or is it?JavaScriptis notobject-oriented
    • OBJECTS
    • We create objects on the fly … noneed for classes•  var obj = {};
    • PROPERTIES
    • Properties are similarly createddynamicallyvar person1 = {! lastName: "Griffin",! firstName: "Stewie",! city: "Quahog",! state: "RI!};!document.write("The person is " +person1.firstName + " " + person1.lastName);!document.write("He is from " + person1["city"]);!var prop="state";!document.write("He lives in " + person1[prop]);!
    • We can loop over the properties in anobjectfor (var propName in person2) {! document.write(person2[propName]);!}!
    • METHODS
    • Methods are just functions that areassigned a name via a propertyvar person2 = {! firstName: "Stewie", lastName: "Griffin",! attack: function() {! document.write("Mummy!");! }!};!!person2.attack();!
    • CLASSES
    • Did you notice that theres no creating a class first? Java JavaScriptpublic class Car {! private Engine _engine;! var c = {! public Engine getEngine() ! var Engine = { type: {! "Hemi"}! return _engine;! }! }! public void setEngine(Engineengine)! console.log(c.Engine);! {! _engine = engine;! }!}!•  Then later …Car c = new Car();!c.setEngine(new Engine("Hemi"));!
    • But I want classes!•  You cant have true classes•  JavaScript is not truly object-oriented•  It just looks like it
    • To emulate a classfunction Car() {! this.Engine = new Engine();! this.Color;! this.Drive = function() {! console.log("Zoom zoom");! }!}!•  Then later …var c = new Car();!c.Color = "Red";!c.AddPassenger("Earnhardt", "Dale");!
    • CONSTRUCTORS
    • Constructorsfunction Car()
{
   // private property
   var color = ;

   // private constructor
   var Car = function() {
       alert("Car object was instantiated.");
       color = Red;
   }() // <-- The parens make it run upon instantiation
   // getter
   this.getColor = function() {
       return color;
   }

   // setter
   this.setColor = function(data) {
       color = data;
   }
}!
    • OVERLOADING
    • JavaScript is weird about functionparameters, too•  All arguments are optional by default•  If you dont supply a value, it becomes undefined•  If you supply extra arguments, they are silently ignored•  Arguments are dynamically-typed
    • So, we sort of get overloading for free•  If we do this:function x(a, b, c) { // Do stuff with a, b, & c }!•  These all work:x(1, 2, 3);!x(1);!x(); // a, b, and c are all null!x(1, 2, 3, 4, 5, 6, 7, 8); // Extras are ignored!•  Sofunction x(a, b, c) {! if (b) { doSomething(); }! if (c) { doSomethingElse(); }! doOtherThings();!}!
    • Bonus info! How to loop throughindeterminate number of parameters•  The arguments array holds all the parameters passed into a functionfunction func() {! for (var x=0; x < arguments.length; x++) {! console.log(arguments[x]);! }!}!
    • INHERITANCE
    • Prototypes allow us to add behavior to allobjects of the same type•  It is attaching behavior to all objects of that type even after theyre created.•  Can attach to JavaScript built-in objects
    • INTERFACES
    • Yeah.JavaScripthas nointerfaces
    • ENCAPSULATION
    • Then we use a library that does this•  var mom = "Marge"•  var runTime = "
    • What happens to the runTime variable?var mom = "Lois";!var runTime = new Date();!function showInfo() {! return mom + " ran at " + runTime;!}!alert(showInfo());!
    • Weve polluted the global namespace
    • We can make it private like thisfunction () {! var mom = "Lois";! var runTime = new Date();! function showInfo() {! return mom + " ran at " + runTime;! }! alert(showInfo());!}!
    • This declares it and then runs it(function () {! var mom = "Lois";! var runTime = new Date();! function showInfo() {! return mom + " ran at " + runTime;! }! alert(showInfo());!})();!
    • NAMESPACES
    • Whats the problem with this?(function () {! var mom = "Lois";! var runTime = new Date();! function showInfo() {! return mom + " ran at " + runTime;! }!})();!alert(showInfo());
    • How do we make showInfo() visible?•  We need to attach showInfo() to something that can be seen outside.•  But not window.•  We need another namespace
    • First create an object that can behave likethe namespacevar tic = {};!•  This creates a brand new object•  or better yetvar tic = tic || {};!•  This gets a reference to the object already created or creates a new object if it doesnt already exist.
    • Then we can add functions to this objecttic.currentTime = function () {! return new Date();!};!•  And run it like so:var now = tic.currentTime();!
    • We can go several levels deeptic.characters.places = tic.characters.places || {};!tic.characters.places.showCurrentLocation = ! function () {! return "Quahog";! };!
    • Holy moley!Those JavaScriptobjects look and awful lot like namespaces!
    • So, to encapsulate our function into anamespace ...(function (ns) {! var mom = "Lois";! var runTime = new Date();! ns.showInfo = function () {! return mom + " ran at " + runTime;! }!})(tic.characters = tic.characters || {});!•  To execute:tic.characters.showInfo();!
    • Conclusion•  While JavaScript is far from OO, most OO features can be mimicked.•  Objects•  Classes•  Properties•  Methods•  Constructors•  Overloading•  Inheritance•  Namespaces