Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Class comp
(version: 0)
Comparing performance of:
Class.extends vs cls.prototype
Created:
4 years ago
by:
Guest
Jump to the latest result
Script Preparation code:
/** * * <p>This script provides inheritance support and is inspired by base2 and Prototype</p> * * <p>The constructor is named <pre>init()</pre></p> * * <p>If a needs to override a method of a superclass, the overridden method can always be * called using</p> * <pre>this._super();</pre> * * <p>This is true for the constructor as well as for any other method.</p> * * @see http://etobi.de/blog/artikel/weiterlesen/vererbung-mit-javascript/ * * @module util/Class */ /** * Base class which allows simple inheritance. * * @class module:util/Class~Class * @example * var MyClass = Class.extends({ * init : function(){ * // do some construction * } * }) * * // you can call the super class's method from within any method like this * ... * myMethod : function(){ * // call 'myMethod' of super class * this._super(); * } */ // Hack, because vars cannot be imported in DW, only functions /** * @class */ function Class() {} // eslint-disable-next-line wrap-iife (function () { var initializing = false; var fnTest = /xyz/.test(function () {}) ? /\b_super\b/ : /.*/; // The base Class implementation (does nothing) // this.Class = function(){}; /** * Create a new sub class * @param {Object} prop An object defining the members of the sub class * @return {Object} The sub class * @instance */ Class.extends = function (prop) { var _super = this.prototype; // Instantiate a base class (but only create the instance, // don't run the init constructor) initializing = true; var prototype = new this(); initializing = false; // Copy the properties over onto the new prototype var callback = function (name, fn) { return function () { var tmp = this._super; // Add a new ._super() method that is the same method // but on the super-class this._super = _super[name]; // The method only need to be bound temporarily, so we // remove it when we're done executing var ret = fn.apply(this, arguments); this._super = tmp; return ret; }; }; // eslint-disable-next-line guard-for-in, no-restricted-syntax for (var name in prop) { // Check if we're overwriting an existing function prototype[name] = typeof prop[name] === 'function' && typeof _super[name] === 'function' && fnTest.test(prop[name]) ? callback(name, prop[name]) : prop[name]; } /** * The dummy class constructor * @constructor */ function Class() { // eslint-disable-line no-shadow // All construction is actually done in the init method if (!initializing && this.init) { this.init.apply(this, arguments); } } // Populate our constructed prototype object Class.prototype = prototype; // Enforce the constructor to be what we expect Class.constructor = Class; // And make this class extendable // eslint-disable-next-line no-caller Class.extends = arguments.callee; return Class; }; })();
Tests:
Class.extends
/** @type {module:util/Class~Class} */ //module.exports = Class; const cls = Class.extends({ /** * @constructor * @param {*} resource resource * @param {string } type type of resource, can be value|fabric (value is default) */ init: function () { }, doTest: function () { } }); const cls2 = cls.extends({ doTest: function () { } }); var obj = new cls2(); obj.doTest();
cls.prototype
function cls() { } cls.prototype = {}; cls.prototype.constructor = cls; cls.prototype.doTest= function() { } function cls2 () { cls.call(this); } cls2.prototype = Object.create(cls.prototype); cls2.prototype.constructor = cls; cls2.prototype.doTest= function() { } var obj = new cls(); obj.doTest();
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
Class.extends
cls.prototype
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
**Overview of the Benchmark** The benchmark measures the performance of two different approaches to implement inheritance in JavaScript: `Class.extends` (from the `util/Class` module) and a manual implementation using prototype chaining. **What is tested?** * Two test cases: + "Class.extends": This test case creates a new class using the `Class.extends` method, with two methods (`init` and `doTest`) defined on the class. The test then creates an instance of this class and calls its `doTest` method. + "cls.prototype": This test case creates a simple class without inheritance support (using only prototype chaining) and defines two methods (`init` and `doTest`) on it. The test then creates an instance of this class and calls its `doTest` method. **Options compared** * Two approaches to implement inheritance in JavaScript: + Manual implementation using prototype chaining (`cls.prototype`) + Using the `Class.extends` method from the `util/Class` module **Pros and Cons** **Manual implementation (cls.prototype)** Pros: * Simple and straightforward * No external dependencies required * Allows for fine-grained control over inheritance behavior Cons: * Can be more verbose and error-prone due to the need to manually set up prototype chaining **Using Class.extends (util/Class module)** Pros: * More concise and readable code * Provides a simple and well-tested abstraction for implementing inheritance * Reduces the likelihood of errors related to prototype chain management Cons: * External dependency on the `util/Class` module is required * May not provide fine-grained control over inheritance behavior **Latest benchmark results** The latest benchmark results show that: * The manual implementation using prototype chaining (`cls.prototype`) performs slightly better than the `Class.extends` approach. * Both approaches are relatively fast, with average execution times of around 150-200 ms per test. However, it's essential to note that these results may vary depending on specific use cases and JavaScript engines used.
Related benchmarks:
subclass vs overwrite array original method
Classes vs Prototype
Classes vs Prototype vs ES classes
ES6 Class vs Prototype vs Object Literal v2 with Extends
Comments
Confirm delete:
Do you really want to delete benchmark?