CODEWITHSUNDEEP
javascriptperformanceoopinheritance
Nikola
Nikola

Reputation: 11

JavaScript OOP, inheritance and performance

I read a lot of articles on the matter, as well as, watched few videos. However, I could still not understand which one and why is better than the other - classical/functional and prototypical inheritance. What I found and have read before posting:

I want to mention that I would like to know better which type of inheritance is better based on performance, stability (error prone), or other prons/cons. I am also pointing to OOP and inheritance not based on any libraries or custom code (excluding polyfill for object create). If a framework that supports own OOP and inheritance is used, I will go with it, but here I am not interested in those.

Here is some code I wrote using both, prototypal one and classical.

var Human = function(name){
        this.name = name;
        return this;
};
Human.prototype.introduce = function(){
        return "I am " + this.name;
};

var Ninja = function(name, level){
        Human.call(this, name);
        this.level = level;
}
Ninja.prototype = Object.create(Human.prototype);//new Human();
Ninja.prototype.introduce = function(){
        var base = Human.prototype.introduce.call(this);
        return base + " My level is " + this.level;
};
Ninja.prototype.fight = function(){
        return (this.name + " can fight");
};

var MasterNinja = function(name, level, masterClass){
        Ninja.call(this, name, level);
        this.masterClass = masterClass;
}
MasterNinja.prototype = Object.create(Ninja.prototype);//new Ninja();
MasterNinja.prototype.introduce = function(){
        var base = Ninja.prototype.introduce.call(this);
        return base + " My master class is " + this.masterClass;
};
MasterNinja.prototype.fight = function(){
        var base = Ninja.prototype.fight.call(this);
        return base + " have master class!";
};              
MasterNinja.prototype.masterFight = function(){
        return this.name + " can master fight!";
};


var human = {
        _init: function(name){
                this.name = name;
                return this;
        },
        introduce: function(){
                return ("Hi, I am " + this.name);
        }
};

var ninja = Object.create(human);
ninja._init = function(name, level){
        human._init.call(this, name);
        this.level = level;
        return this;
};
ninja.introduce = function(){
        var base = human.introduce.call(this);
        return base + " My level is " + this.level;
};
ninja.fight = function(){
        return (this.name + " can fight");
};

var masterNinja = Object.create(ninja);
masterNinja._init = function(name, level, masterClass){
        ninja._init.call(this, name, level);
        this.masterClass = masterClass;
        return this;
};
masterNinja.introduce = function(){
        var base = ninja.introduce.call(this);
        return base + " My master class is " + this.masterClass;
};
masterNinja.fight = function(){
        var base = ninja.fight.call(this);
        return base + " have master class!";
};              
masterNinja.masterFight = function(){
        return this.name + " can master fight!";
};

I created a jsperf test, which could be found here:

http://jsperf.com/js-basic-inheritance

It shows that using 'new' is much faster than 'Object.create'.

I will be glad to hear what you think. I hope this is not considered unnecessary question, since I could not find answer yet. If I have made a critical mistake in my code, please, give me feedback.

Upvotes: 1

Views: 629

Answers (1)

Esailija
Esailija

Reputation: 140210

You can read between the lines from the strong mode proposal what is considered easy to optimize https://docs.google.com/document/d/1Qk0qC4s_XNCLemj42FqfsRLp49nDQMZ1y7fwf5YjaI4/view#heading=h.wnixb1advahb The proposal is based on ES6 which has class keyword but this is simply syntactic sugar for ES5 constructor function + prototype assignments:

ES5:

function Class(value) {
    this.value = value;
}

Class.prototype.getValue = function() {
    return this.value;
};

ES6 (Works in Chrome 42+ without flags):

class Class {
    constructor(value) {
        this.value = value;
    }

    getValue() {
        return this.value;
    }
}

Upvotes: 1

Related Questions