Once Upon a Time in Javascript: Classes and Inheritance

Classes in javascript were first introduced as part of ECMAScript 6 standard back in 2015. Today, they feel like something natural, but how was javascript before them?

Hi rocks, Sasha here. Today we gonna see how classes and inheritance were done in javascript before ES6.

Classes: ES6

First of all, classes are not natural to javascript, they are just a "syntactical sugar over javascript's existing prototype-based inheritance". In fact, class is still a function:

class A{}
console.log(typeof A);//function

Let's create

a class using ES6 standard

class A {
    constructor(id){
        this.id = id;
    }

    getId(){
        return this.id;
    }
}

Nice, we have our class, but wait, it will not work in older browsers.

You can check 

here

 browsers that support ES6 class

At this point you are probably guessing: "

But I use classes in React and they work great even in IE

React uses 

Babel

Classes: Js

Now, let's create the same class using

pure javascript

//class constructor
function A(id){
    //assign id
    this.id = id;
}

//add function to prototype
A.prototype = {
    getId: function(){
        return this.id;
    }
}

To be honest, it looks kinda ugly to me. The first time I saw this, I thought it was a joke. But yes,

this is the way you create a class javascript

Objects are instantiated the same way in both cases:

//works with both Js and ES6
var a = new A(45);
console.log(a.getId());//45

Inheritance

Let's do some

inheritance in ES6

//B extends A, inherits all of it's methods and fields.
class B extends A {
    constructor(id){
        //call super(A) constructor
        super(id);
    }
}

const b = new B(45);
console.log(b.getId());//45

I'm pretty sure there is no need for an explanation.

Now, let's do the same in

pure javascript

//define a B class
function B (id){
    //extends A by calling A's constructor on it's self
    A.call(this, id);
}

//inherit all of A's methods and fields (parameters)
B.prototype = new A();
//set constructor to B
B.prototype.constructor = B;

const b = new B(45);
console.log(b.getId());//45

Wow, so much going on. There are some things I am going to explain:

1. A.call(this, id)

   - same as super(). It applies A's constructor on B.

2. B.prototype = new A()

   - there is were inheritance is done: it assigns a new A object as a prototype for all of B objects.

3. B.prototype.constructor = B

   - in the previous pass we are assigning all of A's properties to prototype of B, included constructor, so there is a need to set a B as a constructor for B's prototype.

Yeah, not the esiest way of extending an object, but this is the way inheritance works in

prototype-based language.

Conclusion

In this article, we examined how inheritance is done using ES6 standard and how it was done once upon a time in javascript.