Pseudoclassical Subclass Instantiation in JavaScript

Ariel Salem

Follow

Feb 23, 2017 · 4 min read

AKA We heard you liked Classes, so we put Classes in your Classes.

Class Instantiation:
So what exactly is class instantiation? For those that are unfamiliar, class instantiation allows programmers to organize their code while reducing repetition. This is achieved by creating Object Classes that return specific values upon invocation, thereby reducing the need to rewrite often-used parts of your code. You may be asking yourself, how exactly does that work? Well, let’s say we’re creating a game like Frogger, where a lot of different pieces have the same attributes (like movement speed, location, style, color, etc…).

Now, we could create each car individually, making sure they each have the same movement speed, are facing the same direction, are starting on the same line, but that would be a lot of work to create and maintain. Here’s where Class Inheritance comes into play. By creating a global Car Class, we can invoke the Car Class to instantiate the basic framework of a car object, without having to rewrite the same car. This new car object will inherit whatever attributes the Car Class has while allowing you to program features that are unique to that specific car (like color or length). While there are four main instantiation patterns within JavaScript (Functional, Functional-Shared, Prototypal, and Pseudoclassical), I will be focusing on Pseudoclassical instantiation since it has been optimized to run on JavaScript.

Pseudoclassical instantiation:
If you’re new to instantiation, it may be helpful to checkout this earlier post before moving forward. Going off of our previous example, we want to create a global Car Class that we can return specific information within an object so that we don’t have to constantly rewrite the same code. In doing so, we can keep our code succinct, defined, and in order.

var Car = function(color, movementSpeed) {
  this.color = color;
  this.movementSpeed = movementSpeed;
};

You’ll notice that the Car function is capitalized — this is standard procedure when declaring classes. The Car Class also takes in two common arguments for the Frogger game, color and movement speed. But wait a minute, didn’t I say this Car Class would be returning those values in an object? Here’s where JavaScript optimization comes into play. When using Pseudoclassical Instantiation, both the Object.create and return statements are implicit, negating the need to write them. So in fact, our Class looks more like this:

var Car = function(color, movementSpeed) {
  // this = Object.create(Car.prototype); // this Object.create 
  //    method is creating our new object behind the scenes.
  this.color = color;
  this.movementSpeed = movementSpeed;
  // return this; // return this is simply returning our new Object.
};

Now, all we have to do to create a new car is invoke the Car Class function:

var redCar = new Car ("red", 10);// redCar is now an instance of the Car class with specific "red"  // and 10 values like so:redCar {
  color: "red",
  movementSpeed: 10
}

Now if we wanted our redCar to have a method that is unique to itself, all we have to do is create a new method onto the redCar:

redCar.prototype.startingLocation = function(location) {
   this.location = location;
}

It may not seem like much now, but by creating a Class function, we can delegate repetitive behavior towards one function, thereby reducing overall repetition and any potential discrepancies that may arise.

Subclassing:
You may be thinking to yourself, that’s cool, but what if I wanted to use our redCar instantiation properties on some other car? Here’s where Subclassing comes into play. Much like Class Instantiation, we can create a Subclass based on the Class operator that inherits characteristics from the Class operator AND has its own unique properties:

var Location = function(color, movementSpeed, location) {
   this.location = location;
   Car.call(this, color, movementSpeed); // calling the previous 
     // Class operator allows our new subclass to inherit its 
     // properties.
}
    
Location.prototype = Object.create(Car.prototype); // this sets up 
   // the prototype relationship between the Subclass instantiation 
   // and the original Class (Car).
Location.protoytpe.constructor = Location.prototype; // since the 
   //previous line overwrote our prototype constructor, we must 
   //setup our Subclass relationship to its Constructor prototype 
   //object.

Now if we wanted to create a redCar and yellowCar with the same properties, we can do so without having to rewrite the location method one both of them:

var redCar = new Location("red", 10, 12);
  //redCar = {color:"red", movementSpeed: 10, location: 12};
var yellowCar = new Location("yellow", 8, 15);
  //yellowCar = {color:"yellow", movementSpeed: 8, location: 15};
var blueCar = new Car("blue", 6);
  //blueCar = {color:"blue", movementSpeed: 6};

Since the blueCar is an instance of the Car Class, it does not have access to the Location subclass properties. This one-way relationship allows the Location Subclass to inherit properties from the Car Class while preventing the Car Class from accessing those properties.

Recap:
- You will typically want to instantiate when you see repeated states and behavior in your code.
- By creating Classes and Subclasses, we can reduce repetition and keep our code neat and organized.
- Whenever we create a Class operator using Pseudoclassical Instantiation, the Object.create() and return this steps are implied.
- Subclasses inherit properties from the Classes they call, but Classes cannot inherit their Subclass properties.
- When creating a Subclass, we must remember to call the Class we are inheriting, and reset the Subclass.prototype & Subclass.prototype.constructors.

There you have it, more to come soon!