JavaScript OOP Patterns

classical.js

function Creature(data = {}) {
  
  // private properties
  let { age = 0 } = data;

   // public methods
  this.getAge = function() {
    return age;
  };
  
  this.setAge = function(newAge) {
    age = newAge;
  };
}

function Dragon(data = {}) {
  // setup inheritance chain
  Creature.call(this);
  
  // setup private properties
  let { name = '' } = data;

  // setup public methods
  this.getName = function() {
    return name;
  };
}

// setup inheritance
Dragon.prototype = Object.create(Creature.prototype);
Dragon.prototype.constructor = Dragon;

let beast = new Creature();
beast.getAge(); // 0

let mystic = new Dragon({ name: 'Mystic' });
mystic.getAge();   // 0
mystic.setAge(22); 
mystic.getAge();   // 22
mystic.getName();  // 'Mystic'

crockford.js

function creature(data = {}) {
  
  // private properties
  let { age = 0 } = data;
  
  // public methods
  const getAge = function() {
    return age;
  };
  
  const setAge = function(newAge) {
    age = newAge;
  };
  
  // freeze methods and return
  return Object.freeze({
    getAge,
    setAge
  });
}

function dragon(data = {}) {

  // private properties
  let { name = '' } = data;
  
  // extend other constructors
  const {
    getAge,
    setAge
  } = creature(data);
  
  // public methods
  const getName = function() {
    return name;
  };
  
  // freeze methods and return
  return Object.freeze({
    getAge,
    setAge,
    getName
  });
}

let beast = creature();
beast.getAge(); // 0

let mystic = dragon({ 
  name: 'Mystic'
});
mystic.getAge();   // 0
mystic.setAge(22); 
mystic.getAge();   // 22
mystic.getName();  // 'Mystic'

es6-classes.js

class Creature {
  
  constructor(data = {}) {
    // private properties
    let { age = 0 } = data;
    this._age = age;
  }
  
   // public methods
  getAge() {
    return this._age;
  }
  
  setAge(newAge) {
    this._age = newAge;
  }
}

class Dragon extends Creature {
  
  constructor(data = {}) {
    // call the super constructor
    super(data);
    // setup private properties
    let { name = '' } = data;
    this._name = name;
  }
  
  // setup public methods
  getName() {
    return this._name;
  }
}

let beast = new Creature();
beast.getAge(); // 0

let mystic = new Dragon({ name: 'Mystic' });
mystic.getAge();   // 0
mystic.setAge(22); 
mystic.getAge();   // 22
mystic.getName();  // 'Mystic'

prototypal.js

const creature = {
  
  // private properties
  _age: 0,
  
  // public methods
  getAge() {
    return this._age;
  },
  
  setAge(newAge) {
    this._age = newAge;
  },
  
  // constructor
  constructor(data = {}) {
    // create our instance
    let instance = Object.create(this);
    
    // setup private properties
    let { age = 0 } = data;
    instance._age = age;
    
    // return the instance
    return instance;
  }
};

// setup dragon (child) prototype that inherits from the creature (parent) prototype
const dragon = creature.constructor();

dragon.constructor = function(data = {}) {
  // call super constructor
  const instance = creature.constructor(data);
  
  // setup private properties
  let { name = '' } = data;
  instance._name = name;

  // setup public methods
  instance.getName = function() {
    return this._name;
  };
  
  // return the instance
  return instance;
}

let beast = creature.constructor();
beast.getAge(); // 0

let mystic = dragon.constructor({ name: 'Mystic' });
mystic.getAge();   // 0
mystic.setAge(22); 
mystic.getAge();   // 22
mystic.getName();  // 'Mystic'