Skip to content

Instantly share code, notes, and snippets.

@stujo
Created November 4, 2014 17:00
Show Gist options
  • Save stujo/2bddc077545123a7db25 to your computer and use it in GitHub Desktop.
Save stujo/2bddc077545123a7db25 to your computer and use it in GitHub Desktop.
OO Js

#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

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

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

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

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)

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

#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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment