in Javascript

Simple cross-browser inheritance with Javascript

There are multiple ways to implement object classes in Javascript, especially since ECMAScript6 (ES6) emerged. Unfortunately, ES6 is not supported by old browers (you know, the old shitty ones that almost all of our customers don’t want to get rid of since they’re “more secure” LOL) and the legacy implementations are more of a hack than proper object-oriented programming.

Implementing object and classes is a deal, but inheritance is a real challenge. Or it isn’t.

Here is a simple way to do proper class inheritance in Javascript that works even in old browsers.

All the magic resides in the prototype.

Let’s start with a parent class ClassA :

All the methods of ClassA reside in its protoype. To create a child class of ClassB with all the methods from ClassA, the best way is to create it’s prototype from the prototype of an object instance of ClassA.

child.prototype = Object.create(parent.prototype);

This may look weird at the first glance but this is the actual way legacy Javascript inheritance works.

Let’s try it by implementing a child class ClassB :

Test it out :

Result :

Here what the object b looks like with the browser’s Javascript inspector :

As you can see, the two prototypes __proto__ are chained. ClassB‘s print() function overrides ClassA‘s.

But there is one issue, the constructor() method that is created by default while implementing the class has been erased in the process and the constructor method for object b is now ClassA() while it should be ClassB() :

You need to explicitly set the constructor of the child class just after setting the parent prototype :
child.prototype.constructor = child;

With our example :

We now have the proper constructor for object b.

For a better readability of the code, we can implement an extend() function to do the job :

The extend() function can now be called while implementing child classes :