Skip to content

Instantly share code, notes, and snippets.

@stujo
Last active June 27, 2018 05:31
Show Gist options
  • Save stujo/f513fbb9ec6e27fad587 to your computer and use it in GitHub Desktop.
Save stujo/f513fbb9ec6e27fad587 to your computer and use it in GitHub Desktop.
Object Oriented JavaScript

#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

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

#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)
@klaoha06
Copy link

Thank you! this is wonderful! 👯

@bluehawk27
Copy link

this was perfect!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment