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: {} .log( A); class A console typeof //function Let's create : a class using ES6 standard { (id){ .id = id;
    }

    getId(){ .id;
    }
} class A constructor this return this 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: " , how is it possible?". The fact is that , so its code is transpiled into older versions of javascript, compatible with most of the browsers. 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 { .id = id;
} A.prototype = { : { .id;
    }
} //class constructor ( ) function A id //assign id this //add function to prototype getId ( ) function return this To be honest, it looks kinda ugly to me. The first time I saw this, I thought it was a joke. But yes, . 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. this is the way you create a class javascript Objects are instantiated the same way in both cases: a = A( ); .log(a.getId()); //works with both Js and ES6 var new 45 console //45 Inheritance Let's do some : inheritance in ES6 { (id){ (id);
    }
} b = B( ); .log(b.getId()); //B extends A, inherits all of it's methods and fields. class B extends A constructor //call super(A) constructor super const new 45 console //45 I'm pretty sure there is no need for an explanation. Now, let's do the same in : pure javascript { A.call( , id);
} B.prototype = A(); B.prototype.constructor = B; b = B( ); .log(b.getId()); //define a B class ( ) function B id //extends A by calling A's constructor on it's self this //inherit all of A's methods and fields (parameters) new //set constructor to B const new 45 console //45 Wow, so much going on. There are some things I am going to explain: - same as super(). It applies A's constructor on B. A.call(this, id) - there is were inheritance is done: it assigns a new A object as a prototype for all of B objects. B.prototype = new A() - 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. B.prototype.constructor = B 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.

Super

Portfolio

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Once Upon a Time in Javascript: Classes and Inheritance

Too Long; Didn't Read

Company Mentioned

Sasha

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Once Upon a Time in Javascript: Classes and Inheritance

Too Long; Didn't Read

Company Mentioned

Sasha

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES