Object Oriented JavaScript

oojs.md

#Object Oriented Javascript

#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);
• 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);

#Self Study

• Object.defineProperties() -> can also be used on a prototype
• Closures
• Prototypal Inheritance

#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)

Thank you! this is wonderful! 👯

this was perfect!