1

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.

Community
  • 1
  • 1
Nikola
  • 11
  • 1
  • 3
  • Your tangential, additional question is answered [here](http://stackoverflow.com/q/12592913/1048572). please ask one question per post only, I've removed it. – Bergi Apr 13 '15 at 19:18
  • I think you'll want to have a look at https://stackoverflow.com/questions/10898786/correct-javascript-inheritance/ – Bergi Apr 13 '15 at 19:34
  • Really did not search for the edit question, sorry for that. Thank you for the links! – Nikola Apr 13 '15 at 19:37

1 Answers1

1

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;
    }
}
Esailija
  • 138,174
  • 23
  • 272
  • 326
  • maybe I misunderstood the written in the suggested document, but it seems even more pluses for the constructor pattern and using 'new' then, opposite to what I read recently about the evil keyword 'new' and why must use the more native creating objects from objects. Have I written the sample code correctly? – Nikola Apr 13 '15 at 18:38
  • @Nikola Yes, it's opposite of what you have read. If you notice, the authors who write such things probably don't care about performance at all when they make these claims. – Esailija Apr 13 '15 at 18:41
  • Actually, I currently do not find any pluses for the object.create way, since I do not get better performance, no encapsulation and personally, do not find it better formatted as code. Please, provide some tests or resources to prove otherwise if I am wrong in my assumptions. Thank you! – Nikola Apr 13 '15 at 18:48
  • @Nikola I of course agree with you, there is just a very verbal/authorative minority that disagrees and prefers the Object.create way. But since ES6 embraces classes it becomes less an issue in the future – Esailija Apr 13 '15 at 18:51