V0-FunctionalClasses.js

// Note that the Car constructor class contains
// an object property (.methods) even though it
// is a function.  But, remember, in JS, everything
// is basically an object ... even functions
var Car = function(loc) {
    var obj = {loc: loc};
    
    // Extend: Popular JS method (not built-in) that adds/copies 
    // methods from a 'template' object to the newly created 
    // object.  UnderscoreJS is popular lib that has an example
    // implementation of 'extend'
    extend( obj, Car.methods );
    return obj;
};

// 'Anonymous' object that just holds methods to be
// added to a newly created object
Car.methods = {
    move: function(){
        this.loc++;
    },
    on: function(){ ... },
    off: function(){ ... }
};

// Instantiations of objects
var amy = Car(1);
amy.move();
var ben = Car(9);
ben.move();

V1-PrototypalClasses.js

// rather than using 'extend' to add functions to 
// a new object, use 'prototype' property to LINK 
// existing functions to the object.  Also reduces
// memory by using same copy of functions across
// multiple INSTANCES of same object type
var Car = function(loc) {
    var obj = Object.create(Car.prototype);  // *** diff from Functional class
    obj.loc = loc;                          // *** diff from Functional class
    return obj;
};

Car.prototype.move = function(){
        this.loc++;
};
Car.prototype.on = function(){ ... };
Car.prototype.off = function(){ ... };

// Instantiations of objects
var amy = Car(1);
amy.move();
var ben = Car(9);
ben.move();

V2-PseudoclassicalPattern.js

// Pseudoclassical pattern: this layer of synctactic convenience 
// over the Prototypal pattern
// 
// *** Note: no return object.  Using the keyword new when invoking the
//    class, the JS engines automatically insert code at 
//    the beginning (similar to Object.create(...) and at
//    the end (similar to 'return this') of the Class constructor
// 
var Car = function(loc) {
    obj.loc = loc;
};

Car.prototype.move = function(){
        this.loc++;
};
Car.prototype.on = function(){ ... };
Car.prototype.off = function(){ ... };

// Instantiations of objects
var amy = new Car(1);
amy.move();
var ben = new Car(9);
ben.move();

V3-FunctionalStyleSubclassing.js

// Creating SuperClasses and Subclasses in JS OOP - using 
// the Functional Class style of JS object creation

// SuperClass:  Car
var Car = function() {
    var obj = {loc: loc};
    obj.move = function(){
      obj.loc++;
    }
    return obj;
};

// SubClass: Van
var Van - function(loc){
  var obj = Car(loc);
  obj.grab = function(){ ... };
  return obj;
};

// SubClass: Cop
var Cop = function(loc){
  var obj = Car(loc);
  obj.call = function(){ ... };
  return obj;
};

// Instantiations of objects
var amy = new Car(1);
amy.move();

var ben = new Car(9);
ben.move();

var cal = Cop(2);
cal.move();
cal.call();

V4-PseudoclassicalStyleSubclassing.js

// Creating SuperClasses and Subclasses in JS OOP - using 
// the Pseudoclassical style of JS object creation

// SuperClass: Car
var Car = function(loc){
    this.loc = loc;
};

Car.prototype.move = function(){
    this.loc++;
};

// SubClass: Van
var Van = function(loc){
    Car.call(this, loc);
};

// Link to Car.prototype by over-writing and creating
// new *.prototype object from Car.prototype
Van.prototype = Object.create( Car.prototype );

// Generate new constructor to point to Van since the 
// default constructor removed when linking to the
// Car.prototype agove
Van.prototype.constructor = Van;

// Add custom functions for Van-type object instances
Van.prototype.grab = function(){ ... };

// Instantiations of objects
var zed = new Car(3);
zed.move();

var amy = new Van(9);
amy.move();
amy.grab();