stujo/oojs.md

## oojs.md

      
    Raw
  

              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