jsPerf.app is an online JavaScript performance benchmark test runner & jsperf.com mirror. It is a complete rewrite in homage to the once excellent jsperf.com now with hopefully a more modern & maintainable codebase.
jsperf.com URLs are mirrored at the same path, e.g:
https://jsperf.com/negative-modulo/2
Can be accessed at:
https://jsperf.app/negative-modulo/2
This test suite compares performances of pure “prototypal inheritance” and “functional inheritance”. Both patterns have been well explained by Douglas Crockford in his book: JavaScript, The Good Parts.
The benchmark will create several objects built either with prototypal inheritance or functional inheritance, with an inheritance chain of 10 levels, and then will call methods on them.
var extend = function (myObject, newObj) {
Object.keys(newObj).forEach(function (item) {
myObject[item] = newObj[item];
});
};
// Functional inheritance
var object1 = function () {
var publicMethods = {
prop1: 'prop1',
method1: function () {
return this.prop1;
}
};
return function () {
var that = {};
extend(that, publicMethods);
return that;
};
}();
var object2 = function () {
var publicMethods = {
prop2: 'prop2',
method2: function () {
return this.prop2;
}
};
return function () {
var that = object1();
extend(that, publicMethods);
return that;
};
}();
var object3 = function () {
var publicMethods = {
prop3: 'prop3',
method3: function () {
return this.prop3;
}
};
return function () {
var that = object2();
extend(that, publicMethods);
return that;
};
}();
var object4 = function () {
var publicMethods = {
prop4: 'prop4',
method4: function () {
return this.prop4;
}
};
return function () {
var that = object3();
extend(that, publicMethods);
return that;
};
}();
var object5 = function () {
var publicMethods = {
prop5: 'prop5',
method5: function () {
return this.prop5;
}
};
return function () {
var that = object4();
extend(that, publicMethods);
return that;
};
}();
var object6 = function () {
var publicMethods = {
prop6: 'prop6',
method6: function () {
return this.prop6;
}
};
return function () {
var that = object5();
extend(that, publicMethods);
return that;
};
}();
var object7 = function () {
var publicMethods = {
prop7: 'prop7',
method7: function () {
return this.prop7;
}
};
return function () {
var that = object6();
extend(that, publicMethods);
return that;
};
}();
var object8 = function () {
var publicMethods = {
prop8: 'prop',
method8: function () {
return this.prop8;
}
};
return function () {
var that = object7();
extend(that, publicMethods);
return that;
};
}();
var object9 = function () {
var publicMethods = {
prop9: 'prop',
method9: function () {
return this.prop9;
}
};
return function () {
var that = object8();
extend(that, publicMethods);
return that;
};
}();
var object10 = function () {
var publicMethods = {
prop10: 'prop',
method10: function () {
return this.prop10;
}
};
return function () {
var that = object9();
extend(that, publicMethods);
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();
Ready to run.
Test | Ops/sec | |
---|---|---|
object10() |
| ready |
new Object10() |
| ready |
obj10.methods() |
| ready |
Ob10.methods() |
| ready |
new BObject10() |
| ready |
BOb10.methods() |
| ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.