The Pseudoclassical inheritance pattern in Javascript

Json Lee
Json Lee
Jul 23, 2017 · 4 min read

I’d like to start by posing a question to you, the reader.

“Would you consider Javascript to be a class-based language”?

If your native tongue is something like Ruby or C++ you’re probably responding here with a resounding “Nahhhh”, for a variety of reasons. Maybe you think that because Javascript doesn’t have protected variables or because JS doesn’t have as many built-ins that support classes, it doesn’t qualify as a “class based language”. I’m not going to discuss the merits of those assertions here; but whether you agree that Javascript is a class-based language or not, Javascript does in fact have conventions that help support classes/object constructors (albeit on a smaller scale than other class-based languages). Especially now with the introduction of ES6, creating class constructors in javascript has never been easier!

Perhaps we should take a step back here and consider the question of “what’s a class?” There are many answers to this but the one that I like best goes like this: “a class in javascript is simply a function that is capable of creating [or ‘instantiating’] a fleet of similar objects.” There are a number of ways to create classes in Javascript under this definition (functional, functional-shared, prototypal and pseudoclassical), but the purpose of this post is to discuss one in particular: pseudoclassical. The Pseudoclassical pattern in javascript is currently the favored method in javascript when it comes to object instantiation, and if the new methods introduced in ES6 are any indication of things to come, it’s not going anywhere.

In order to understand pseudoclassical inheritance, we should begin by discussing the concept of prototyping in Javascript.

var Car = function(color) {
this.wheels = 4;
this.color = color;
this.fuel = ‘regular’;
this.location = 0
};
Car.prototype.move = function() {
this.location ++
};

Prototyping refers to the concept of adding properties and methods onto every single object that’s being instantiated by a class. When the above class is invoked and a brand new object is instantiated, it will not only inherit the properties that are listed within the class itself, but it will also have access to any methods or properties that are on the class’s prototype as well.

“Big deal, Jason. You can do that with the shared functional method also”.

Great observation, and an excellent usage of commas there! Here’s the thing- by adding methods and properties onto a class’s prototype you not only add it to every object that will be created by this class, you also add it to every single object this class has instantiated in the past. This means that later on if you add more methods, all of these will be available to your past, present and future objects instantiated by your class!

“Ok, that’s pretty cool. So how does it work?”

The reason for this being possible is that when a method is invoked on an object, the browser will first look for the method in the object itself. If it doesn’t find it there, it will look to that object’s prototype chain, which just means that it will look to where the object was created for that method. All objects in javascript are part of a prototype chain that eventually leads to something called “ the object prototype”, which is where all of the built-in functions for objects are stored. Arrays and strings being types of objects in Javascript, have their own Array.prototype and String.prototype where their respective built in functions are stored. This is actually where all of the built-in functions we love and adore (slice, push, pop etc…) live!

Side note: If this is news to you and you’re learning how to code in javascript, I’d highly recommend opening up a Chrome console, typing in “Array.prototype” and “String.prototype” and inspecting the objects that are returned.

ES5 method and the “new” keyword

Here is what instantiating an object using the Pseudoclassical method looks like in ES5.

var bumbleBee = new Car(yellow);

This line of code invokes the Car class we defined earlier and creates an object that looks like:

var bumbleBee = {
wheels = 4;
color = ‘yellow’;
fuel = ‘regular’;
location = 0
}

And if we call…

bumbleBee.move();

We will see that the location in var bumbleBee the object increment from 0 to 1.

var bumbleBee = {
wheels = 4;
color = ‘yellow’;
fuel = ‘regular’;
location = 1
}

I know what you’re thinking:

“What kind of sorcery is contained within this ‘new’ keyword?”

By calling the “new” keyword, Javascript enters into a new state called “construction mode”.

var Car = function(color) { this = Object.create(Car.prototype);//this line is implied this.wheels = 4;
this.color = ‘yellow’;
this.fuel = ‘regular’;
this.location = 0
return this;//this line is implied}

During this time Javascript will note the presence of the “new” keyword and add a couple lines of code into the Class in order to finish instantiating your object. The lines that are italicized in the above block are added in automagically, and Voila! You have a freshly minted object.

ES6 method

“This looks like ES5… isn’t this deprecated at this point? “

Yes and no. Currently, full browser support for ES6 is not fully here yet so ES5 will still work fine in most browsers whereas you’ll need a transpiler like Babel to write these classes in ES6. That said, I’d be doing you a disservice if I didn’t reveal what this actually looks like in ES6 so here is the above code rewritten in ES6.

class Car {
constructor(color) {
this.color = color;
this.wheels = 4;
this.fuel = ‘regular’;
this.location = 0;
}
move = function() {
this.location ++;
}
}

The mechanics of the “new” keyword are pretty much unchanged going from ES5 to ES6 since no real functionality was added during the change- It’s just a cleaner way of syntactically expressing the same code.

This blog post was intended to elucidate some of the details of how the pseudoclassical inheritance pattern and the prototype chain works in Javascript. Thanks for reading!

Json Lee

Written by

Json Lee

A web developer that loves learning about Javascript and sharing knowledge with others. Feel free to reach out! Github: JsonLitz

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade