Hackernoon logoOnce Upon a Time in Javascript: Classes and Inheritance by@the_rock

Once Upon a Time in Javascript: Classes and Inheritance

Author profile picture

@the_rockSasha

Software Developer from monday to friday (Healthcare sector), Game Developer in free time

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
, how is it possible?". The fact is that
React uses 
Babel
, so its code is transpiled into older versions of javascript, compatible with most of the browsers.

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
. Once you get into it, it becomes pretty simple: a function serves as a constructor and returns an object. Each object has access to the function's prototype, containing all the methods.
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.

Tags

The Noonification banner

Subscribe to get your daily round-up of top tech stories!