Transforming instantiation patterns for parent and child classes— from Functional to Pseudoclassical

Transforming from one Object Instantation pattern to the next isn’t too tricky, but there are a few pieces that can be overlooked, especially if you want to re-use methods from the parent object, while creating a new method of the same name in it’s child.

Here’s an example of this using a functional instantiation pattern

var Hero = function (name) {
  var heroic = {};
  heroic.name = name;
  heroic.cape = true;
  heroic.parents = 'deceased';
  heroic.morals = true;
  heroic.catchPhrase = function () {
    console.log(`${heroic.name} is here to save you!`);
  }
  return heroic;
}
var Avenger = function (name, phrase) {
  var heroic = Hero(name);
  heroic.oldCatchPhrase = heroic.catchPhrase;
  heroic.catchPhrase = function () {
  console.log(`${phrase}`);
  }
  return heroic;
}
//Invoke the functions to see for yourself
var coolman = new Hero('Coolguy');
  coolman.catchPhrase();
  //logs "Cool guy is here to save you!"

var ironMan = new Avenger('Iron Man', 'I love you 3000');
  ironMan.oldCatchPhrase;
  //logs "Iron Man is here to save you!"
  ironMan.catchPhrase();
  //logs "I love you 3000"

Because everything for the object is written in a singular function, methods and properties have access to any parameters via lexical scope. Child objects can utilize their parents’ methods, but if you want to maintain access to the parent method AND write a new method of the same name, it needs to be stored in a property on the child object.

The above code isn’t pretty, but it is functional (pun-intended).

So let’s refactor this in a way that’s cleaner, and more similar to other languages.

Let’s take a pseudo-classical approach…

//Instantiation of parent object
//construct the parent object with any properties or methods that you would like
var Hero = function (name) {
  this.name = name;
  this.cape = true;
  this.parents = 'deceased';
  this.morals = true;
}
//In pseudoclassical, methods are created on the objects 'prototype'
Hero.prototype.catchPhrase = function () {
  console.log(`${this.name} is here to save you!`)
}
var Avenger = function (name, phrase) {
  //call the parent object
  Hero.call(this, name);
  this.name = name;
  this.phrase = phrase;
  //create a property that calls the Hero classes' method with the   context of 'this' set to the Avenger's instance
  this.oldCatchPhrase = Hero.prototype.catchPhrase.call(this);
}
//delegate the prototype chain to Hero
Avenger.prototype = Object.create(Hero.prototype);
//set Avenger as the constructor for new methods
Avenger.prototype.constructor = Avenger;
//create your new catchPhrase method
Avenger.prototype.catchPhrase = function () {
  console.log(`${this.phrase}`);
}

//Invoke the functions to see for yourself
var coolman = new Hero('Coolguy');
coolman.catchPhrase();
  //logs "Cool guy is here to save you!"
var ironMan = new Avenger('Iron Man', 'I love you 3000');
ironMan.oldCatchPhrase;
  //logs "Iron Man is here to save you!"
ironMan.catchPhrase();
  //logs "I love you 3000"

The key above is to call the parent object while shifting the context it has for ‘this’

Neither functional nor pseudoclassical are inherently better than one another. What you write depends on your personal preference and the codebase you work with.

Happy Coding!