OO Js

oojs.md

#Object Oriented Javascript TODO

#Overview

• Creating Objects in JavaScript
  • new Object();
  • Object Literal Notation (Important)
  • Factory Function
• Review JavaScript's this
• More Creating Objects in JavaScript
  • Constructor Function
  • Constructor Function and The Prototype (Important)
• Module Pattern (Important)
• Prototypal Inheritance
  • The Prototype Chain property lookup (Important)
  • Object.create(p);
• Notes For Challenge
• Self Study

#Creating Objects in JavaScript There are so many ways to create objects in JavaScript, we'll talk about when to use which pattern

##Old Skool! Using the Object constuctor

• http://jsbin.com/catibu/6/edit?js,console

var vehicleOldSkool = new Object();
vehicleOldSkool.manufacturer = "GM";
vehicleOldSkool.goFast = function() { 
          console.log("Vrrrooom with " + this.manufacturer + "!"); 
};

vehicleOldSkool.goFast();

• goFast is a Property which contains a Function Reference

##Object Literal Notation

var vehicleObjectLiteral = {
  manufacturer: "Ford",
  goFast: function() {
          console.log("Vrrrooom with " + this.manufacturer + "!");
  },
};

vehicleObjectLiteral.goFast();

• Faster Execution
• Better Organization

##Factory Function

• http://jsbin.com/vipux/1/edit?js,console

var vehicleFactory = function(manufacturer){
  return {
    manufacturer: manufacturer,
    goFast: function() {
      console.log("Vrrrooom with " + this.manufacturer + "!");
    }
  };
};

var vehicleFromFactory = vehicleFactory("Toyota");
  
vehicleFromFactory.goFast();

• Factory Function Less code when instantiating multiple instances

#JavaScript's this

• Depends on execution context of the method not the method definition *http://jsbin.com/dulosi/2/edit?js,console
• bind() <- Needs a shim in IE 7 and IE8
• Polyfill

#Constructor Function

• jsbin - Constructor Function

var Vehicle = function (manufacturer){
    // When called with new this points to a new empty object
    this._manufacturer = manufacturer;
    this.goFast = function() {
      console.log("Vrrrooom with " + this._manufacturer + "!");
    };
};

var vehicleFromConstructor= new Vehicle("BMW");

vehicleFromConstructor.goFast();

console.log('vehicleFromConstructor instanceof Vehicle = ' + (vehicleFromConstructor instanceof Vehicle));

• Initializes system provided empty object when called with new
• DOWNSIDE: Creates multiple instances of the function object (one for each instance)
• prefix private properties with an _ underscore

#Constructor Function and The Prototype (Important)

• http://jsbin.com/megofa/6/edit?js,console

var Vehicle = function (manufacturer){
  this._manufacturer = manufacturer;
};

Vehicle.prototype.goFast = function() {
  console.log("Vrrrooom with " + this._manufacturer + "!");
};

var vehicleFromConstructorAndPrototype = new Vehicle("Aston Martin");

vehicleFromConstructorAndPrototype.goFast();

console.log('vehicleFromConstructorAndPrototype instanceof Vehicle = ' + (vehicleFromConstructorAndPrototype instanceof Vehicle));

#Module Pattern (Important)

• Many Variations
• Useful for singletons
• Immediately called anonymous function
• Uses a closure for storing private scope
• Uses return to return an object which exposes public properties
• http://jsbin.com/pilagu/3/edit

var MyModule = (function () {

  // private state
  var myPrivateState = 5;
  
  // public state
  var myPublicStateAndBehaviours = {   };

  var privateMethod = function () {
    // has access to myPublicStateAndBehaviours via closure 
    // is not directly callable by the client
    return myPrivateState += 1;
  };

  myPublicStateAndBehaviours.publicMethod = function () {
    // is callable since it's a property of the returned object
    // Has access to privateMethod via closure
    // has access to myPublicStateAndBehaviours via this
    console.log("result=" + privateMethod());
  };

  return myPublicStateAndBehaviours;

})();

MyModule.publicMethod();
MyModule.publicMethod();

#Prototypal Inheritance ##The Prototype Chain property lookup (Important)

• this object itself
• this object's prototype
• this object's prototype's prototype ....and so on to Object.prototype

##Object.create(p)

• http://jsbin.com/gogodi/3/edit?js,console
• Introduced in ECMA 5
• polyfill:

if (typeof Object.create !== 'function') {
  Object.create = function (o) {
    var F = function () {};
    F.prototype = o;
    return new F();
  };
}
var sub = Object.create(base);

#Notes For Challenge

• Implement createTree using new Tree
• Delete the pickOrange Test
• Implement all Jasmine tests by filling out Tree and Orange models
• Once you complete the first round of Jasmine Tests:
  • Write a Simple Controller which binds actions
  • Complete a Grove Model which uses your Tree Model
  • Complete a simple view first
  • Consider using Handlebars to render template

#Self Study

• Object.defineProperties() -> can also be used on a prototype
• Closures
• Prototypal Inheritance
• Modernizr
• http://tests.caniuse.com/

#Review

• Use Object Literal Notation for single use disposible objects and objects without behaviours
• Use Constructor Function with Prototype when you want multiple instances of a class (e.g. objects managed by the model) with behaviour
  • Constructor functions start with a Captial Letter
• Use Module Pattern for Singletons and Services
  • Controllers
  • Models (Singletons)
  • Views
  • Services
  • When the module requires configuration or dependencies the factory pattern can be mixed in, e.g. in Angular value vs factory (service and provider are more complex)

#Challenge

• Jasmine via Rakefile
  • bundle install
• jQuery