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: A.call(this, id) - same as super(). It applies A's constructor on B.B.prototype = new A() - there is were inheritance is done: it assigns a new A object as a prototype for all of B objects.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. 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 class A{}
console.log(typeof A);//function class A {} console .log( typeof A); //function class A {} console .log( typeof A); //function Let's create a class using ES6 standard : a class using ES6 standard a class using ES6 standard class A {
    constructor(id){
        this.id = id;
    }

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

    getId(){
        return this.id;
    }
} class A { constructor ( id ) { this .id = id; } getId ( ) { return this .id; }
} 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 . You can check You can check here here here browsers that support ES6 class 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. But I use classes in React and they work great even in IE But I use classes in React and they work great even in IE React uses React uses Babel Babel Babel Classes: Js Now, let's create the same class using pure javascript : pure javascript pure javascript //class constructor
function A(id){
    //assign id
    this.id = id;
}

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

//add function to prototype
A.prototype = {
    getId: function(){
        return this.id;
    }
} //class constructor function A ( id ) { //assign id this .id = id; } //add function to prototype A.prototype = { getId : function ( ) { return this .id; }
} //class constructor function A ( id ) { //assign id this .id = id; //add function to 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. this is the way you create a class javascript 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 //works with both Js and ES6
var a = new A(45);
console.log(a.getId());//45 //works with both Js and ES6 var a = new A( 45 ); console .log(a.getId()); //45 //works with both Js and ES6 var a = new A( 45 ); console .log(a.getId()); //45 Inheritance Let's do some inheritance in ES6 : inheritance in ES6 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 //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 //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 //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 : pure javascript 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 //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 //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 //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 const b = new B( 45 ); console .log(b.getId()); //45 Wow, so much going on. There are some things I am going to explain: A.call(this, id) - same as super(). It applies A's constructor on B. B.prototype = new A() - there is were inheritance is done: it assigns a new A object as a prototype for all of B objects. 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. A.call(this, id) - same as super(). It applies A's constructor on B. A.call(this, id) A.call(this, id) B.prototype = new A() - there is were inheritance is done: it assigns a new A object as a prototype for all of B objects. B.prototype = new A() B.prototype = new A() 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. B.prototype.constructor = B B.prototype.constructor = B Yeah, not the esiest way of extending an object, but this is the way inheritance works in prototype-based language. prototype-based language. 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

Once Upon a Time in Javascript: Classes and Inheritance

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Destructuring in Javascript

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

10 Reasons Why Front End Development Is a Great Career Choice

Destructuring in Javascript

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

10 Reasons Why Front End Development Is a Great Career Choice

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps