ES6/ES5 subclasses

es5-subclasses.js

// ### Psuedoclassical Subclassing ###
// This combines the name defined by `class` with the code defined in `constructor`:
function Tree(size, leaves) {
  this.size = (typeof size === "undefined")? 10 : size;
  const defaultLeaves = {spring: 'green', summer: 'green', fall: 'orange', winter: null};
  this.leaves = (typeof leaves === "undefined")?  defaultLeaves : leaves;
  this.leafColor = null;
}

// The "instance" method:
Tree.prototype.changeSeason = function(season) {
  this.leafColor = this.leaves[season];
  if (season === 'spring') {
    this.size += 1;
  }
}

// The "static" method:
Tree.foo = function() {
  console.log("This is foo");
};

// The derived constructor:
function Maple (syrupQty, size, leaves) {
  // Initialize `Tree`'s stuff:
  Tree.call(this, size, leaves);
  
  // Properties to add when called:
  this.syrupQty = (typeof syrupQty === "undefined") ? 15 : syrupQty;
}

// This was done by `ES6 class` and `ES6 extends`:
Maple.prototype = Object.create(Tree.prototype);
Maple.prototype.constructor = Maple;

// Overridden instance method:
Maple.prototype.changeSeason = function(season) {
  // Supercall:
  Tree.prototype.changeSeason.call(this, season);
  
  // Updated Maple class property
  if (season === 'spring') {
    this.syrupQty += 1;
  }
}

// Another instance method:
Maple.prototype.gatherSyrup = function() {
  this.syrupQty -= 3;
}

const myMaple = new Maple(15, 5);
myMaple.changeSeason('fall');
myMaple.gatherSyrup();
myMaple.changeSeason('spring');

es6-subclasses.js

/*
Both Tree and Maple are JavaScript classes. 
- The Maple class is a "subclass" of Tree and uses the `extends` keyword to set itself as a "subclass". 
- To get from the "subclass" to the parent class, the `super` keyword is used. 
- Did you notice that `super` was used in two different ways?:
    - In Maple's constructor method, `super` is used as a function. 
    - In Maple's changeSeason() method, `super` is used as an object!
*/
class Tree {
  // The code for `Tree` goes in this special `constructor` pseudo-method:
  constructor(size = '10', leaves = {spring: 'green', summer: 'green', fall: 'orange', winter: null}) {
    this.size = size;
    this.leaves = leaves;
    this.leafColor = null;
  }

  // A method to put on the `prototype` object (an "instance method"):
  changeSeason(season) {
    this.leafColor = this.leaves[season];
    if (season === 'spring') {
      this.size += 1;
    }
  }

  // A method to put on the constructor (a "static method"):
  static foo() {
    console.log("This is foo");
  }
}

// Derived "class"
// `extends` keyword defines the prototype behind `Derived.prototype`
class Maple extends Tree {
  constructor(syrupQty = 15, size, leaves) {
    // Initialize `Tree`'s stuff:
    super(size, leaves);
    
    // Properties to initialize when called derived class:
    this.syrupQty = syrupQty;
  }

  // Overridden instance method:
  changeSeason(season) {
    // Supercall:
    super.changeSeason(season);
    
    // Updated Maple class property
    if (season === 'spring') {
      this.syrupQty += 1;
    }
  }

  // Another instance method:
  gatherSyrup() {
    this.syrupQty -= 3;
  }
}

const myMaple = new Maple(15, 5);
myMaple.changeSeason('fall');
myMaple.gatherSyrup();
myMaple.changeSeason('spring');