Prototypal inheritance vs Functional inheritance

JavaScript performance comparison

Revision 4 of this test case created by

Preparation code


      
      <script>
Benchmark.prototype.setup = function() {
  // Functional inheritance
  var object1 = function () {
    var that = {
      prop1: 'prop1',
      method1: function () {
        return that.prop1;
      }
    };
    return that;
  };
  
  var object2 = function () {
    var that = object1();
    that.prop2 = 'prop2';
    that.method2 = function () {
      return that.prop2;
    };
    return that;
  };
  
  var object3 = function () {
    var that = object2();
    that.prop3 = 'prop3';
    that.method3 = function () {
      return that.prop3;
    };
    return that;
  };
  
  var object4 = function () {
    var that = object3();
    that.prop4 = 'prop4';
    that.method4 = function () {
      return that.prop4;
    };
    return that;
  };
  
  var object5 = function () {
    var that = object4();
    that.prop5 = 'prop5';
    that.method5 = function () {
      return that.prop5;
    };
    return that;
  };
  
  var object6 = function () {
    var that = object5();
    that.prop6 = 'prop6';
    that.method6 = function () {
      return that.prop6;
    };
    return that;
  };
  
  var object7 = function () {
    var that = object6();
    that.prop7 = 'prop7';
    that.method7 = function () {
      return that.prop7;
    };
    return that;
  };
  
  var object8 = function () {
    var that = object7();
    that.prop8 = 'prop8';
    that.method8 = function () {
      return that.prop8;
    };
    return that;
  };
  
  var object9 = function () {
    var that = object8();
    that.prop9 = 'prop9';
    that.method9 = function () {
      return that.prop9;
    }
    return that;
  };
  
  var object10 = function () {
    var that = object9();
    that.prop10 = 'prop10';
    that.method10 = function () {
      return that.prop10;
    }
    return that;
  };
  
  // Prototypal inheritance
  var inherits = function(Child, Parent) {
    function F() { }
    F.prototype = Parent.prototype;
    Child.prototype = new F;
  };
  
  var Object1 = function () {};
  Object1.prototype.prop1 = 'prop1';
  Object1.prototype.method1 = function () {
    return this.prop1;
  };
  
  var Object2 = function () {
    Object1.call(this);
  };
  inherits(Object2, Object1);
  Object2.prototype.prop2 = 'prop2';
  Object2.prototype.method2 = function () {
    return this.prop2;
  };
  
  var Object3 = function () {
    Object2.call(this);
  };
  inherits(Object3, Object2);
  Object3.prototype.prop3 = 'prop3';
  Object3.prototype.method3 = function () {
    return this.prop3;
  };
  
  var Object4 = function () {
    Object3.call(this);
  };
  inherits(Object4, Object3);
  Object4.prototype.prop4 = 'prop4';
  Object4.prototype.method4 = function () {
    return this.prop4;
  };
  
  var Object5 = function () {
    Object4.call(this);
  };
  inherits(Object5, Object4);
  Object5.prototype.prop5 = 'prop5';
  Object5.prototype.method5 = function () {
    return this.prop5;
  }
  
  var Object6 = function () {
    Object5.call(this);
  };
  inherits(Object6, Object5);
  Object6.prototype.prop6 = 'prop6';
  Object6.prototype.method6 = function () {
    return this.prop6;
  };
  
  var Object7 = function () {
    Object6.call(this);
  };
  inherits(Object7, Object6);
  Object7.prototype.prop7 = 'prop7';
  Object7.prototype.method7 = function () {
    return this.prop7;
  };
  
  var Object8 = function () {
    Object7.call(this);
  };
  inherits(Object8, Object7);
  Object8.prototype.prop8 = 'prop8';
  Object8.prototype.method8 = function () {
    return this.prop8;
  };
  
  var Object9 = function () {
    Object8.call(this);
  };
  inherits(Object9, Object8);
  Object9.prototype.prop9 = 'prop9';
  Object9.prototype.method9 = function () {
    return this.prop9;
  };
  
  var Object10 = function () {
    Object9.call(this);
  };
  inherits(Object10, Object9);
  Object10.prototype.prop10 = 'prop10';
  Object10.prototype.method10 = function () {
    return this.prop10;
  };
  
  // Prototypal inheritance where all functions are bound to this
  var BObject1 = function () {
    this.method1 = this.method1.bind(this);
  };
  BObject1.prototype.prop1 = 'prop1';
  BObject1.prototype.method1 = function () {
    return this.prop1;
  };
  
  var BObject2 = function () {
    BObject1.call(this);
    this.method2 = this.method2.bind(this);
  };
  inherits(BObject2, BObject1);
  BObject2.prototype.prop2 = 'prop2';
  BObject2.prototype.method2 = function () {
    return this.prop2;
  };
  
  var BObject3 = function () {
    BObject2.call(this);
    this.method3 = this.method3.bind(this);
  };
  inherits(BObject3, BObject2);
  BObject3.prototype.prop3 = 'prop3';
  BObject3.prototype.method3 = function () {
    return this.prop3;
  };
  
  var BObject4 = function () {
    BObject3.call(this);
    this.method4 = this.method4.bind(this);
  };
  inherits(BObject4, BObject3);
  BObject4.prototype.prop4 = 'prop4';
  BObject4.prototype.method4 = function () {
    return this.prop4;
  };
  
  var BObject5 = function () {
    BObject4.call(this);
    this.method5 = this.method5.bind(this);
  };
  inherits(BObject5, BObject4);
  BObject5.prototype.prop5 = 'prop5';
  BObject5.prototype.method5 = function () {
    return this.prop5;
  }
  
  var BObject6 = function () {
    BObject5.call(this);
    this.method6 = this.method6.bind(this);
  };
  inherits(BObject6, BObject5);
  BObject6.prototype.prop6 = 'prop6';
  BObject6.prototype.method6 = function () {
    return this.prop6;
  };
  
  var BObject7 = function () {
    BObject6.call(this);
    this.method7 = this.method7.bind(this);
  };
  inherits(BObject7, BObject6);
  BObject7.prototype.prop7 = 'prop7';
  BObject7.prototype.method7 = function () {
    return this.prop7;
  };
  
  var BObject8 = function () {
    BObject7.call(this);
    this.method8 = this.method8.bind(this);
  };
  inherits(BObject8, BObject7);
  BObject8.prototype.prop8 = 'prop8';
  BObject8.prototype.method8 = function () {
    return this.prop8;
  };
  
  var BObject9 = function () {
    BObject8.call(this);
    this.method9 = this.method9.bind(this);
  };
  inherits(BObject9, BObject8);
  BObject9.prototype.prop9 = 'prop9';
  BObject9.prototype.method9 = function () {
    return this.prop9;
  };
  
  var BObject10 = function () {
    BObject9.call(this);
    this.method10 = this.method10.bind(this);
  };
  inherits(BObject10, BObject9);
  BObject10.prototype.prop10 = 'prop10';
  BObject10.prototype.method10 = function () {
    return this.prop10;
  };
  
  var ob10 = object10();
  
  var Ob10 = new Object10();
  
  var BOb10 = new BObject10();

};
</script>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
new Object10()
new Object10;
pending…
object10()
object10();
pending…
obj10.methods()
ob10.method1();
ob10.method2();
ob10.method3();
ob10.method4();
ob10.method5();
ob10.method6();
ob10.method7();
ob10.method8();
ob10.method9();
ob10.method10();
pending…
Ob10.methods()
Ob10.method1();
Ob10.method2();
Ob10.method3();
Ob10.method4();
Ob10.method5();
Ob10.method6();
Ob10.method7();
Ob10.method8();
Ob10.method9();
Ob10.method10();
pending…
new BObject10()
new BObject10();
pending…
BOb10.methods()
BOb10.method1();
BOb10.method2();
BOb10.method3();
BOb10.method4();
BOb10.method5();
BOb10.method6();
BOb10.method7();
BOb10.method8();
BOb10.method9();
BOb10.method10();
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL.

0 Comments