Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
ES6 Class vs Prototype vs Object Literal (fixed)
(version: 0)
Test the speed and memory usage using 3 different techniques for constructing class objects.
Comparing performance of:
ES6 Class vs Function Prototype vs Object Literal
Created:
2 years ago
by:
Guest
Go to the latest result
Tests:
ES6 Class
class Point { constructor(x, y){ this.x = x; this.y = y; } add(point){ return new Point(this.x + point.x, this.y + point.y); } sub(point){ return new Point(this.x - point.x, this.y - point.y); } } var p1 = new Point(10, 10); var p2 = new Point(10, -10); var sum = p1.add(p2); var dif = p1.sub(p2);
Function Prototype
function Point(x, y){ this.x = x; this.y = y; } Point.prototype.add = function(point){ return new Point(this.x + point.x, this.y + point.y); } Point.prototype.sub = function(point){ return new Point(this.x - point.x, this.y - point.y); } var p1 = new Point(10, 10); var p2 = new Point(10, -10); var sum = p1.add(p2); var dif = p1.sub(p2);
Object Literal
function Point(x, y){ return { x, y, add (point) { return Point(this.x + point.x, this.y + point.y)}, sub (point) { return Point(this.x - point.x, this.y - point.y)} } } var p1 = Point(10, 10); var p2 = Point(10, -10); var sum = p1.add(p2); var dif = p1.sub(p2);
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
ES6 Class
Function Prototype
Object Literal
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
7 months ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36
Browser/OS:
Chrome 142 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=622638" width="100%" height="500px"></iframe>
Object Literal
66.4M/s
ES6 Class
757K/s
Function Prototype
583K/s
View exact numbers
Test name
Executions per second
✓
Object Literal
66,357,748 Ops/sec
ES6 Class
757,044 Ops/sec
Function Prototype
582,922 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the explanation of the provided benchmark. The test case is designed to measure the performance and memory usage of three different approaches for constructing class objects in JavaScript: 1. **ES6 Class**: This approach uses the `class` keyword to define a new class, which creates an instance of a constructor function. 2. **Function Prototype**: This approach defines a `Point` function that returns an object with methods `add` and `sub`. The prototype chain is used to add these methods to the `Point` function. 3. **Object Literal**: This approach uses an object literal to define a new class, which creates an instance of a constructor function. **Comparison Options:** * **ES6 Class vs Function Prototype**: These two approaches are compared to understand the performance and memory usage differences between them. + Pros: - ES6 Class provides better encapsulation and abstraction compared to Function Prototype. - Function Prototype can be more flexible and extensible, as it allows for dynamic method addition. + Cons: - Function Prototype may lead to slower performance due to the overhead of creating a new function object. * **ES6 Class vs Object Literal**: These two approaches are compared to understand the performance and memory usage differences between them. + Pros: - ES6 Class provides better encapsulation and abstraction compared to Object Literal. - Object Literal can be more concise and readable, as it eliminates the need for a constructor function. + Cons: - Object Literal may lead to slower performance due to the overhead of creating a new object. **Library/Functionality:** * The `Point` class/function is used throughout all three test cases. It has methods `add` and `sub`, which return a new instance of `Point`. * No external library is required for this benchmark, as it only relies on JavaScript's built-in functionality. **Special JS Features/Syntax:** * None mentioned in the provided code snippet. However, ES6 classes use some advanced syntax features like `this` binding and static methods (e.g., `static get()`), which might affect performance. **Other Alternatives:** * Another approach could be using a **module-based constructor**, where the class is defined as a module function and instantiated using the `new` keyword. * A more modern alternative could be using ** decorators**, which allow for meta-programming and can improve code reusability and extensibility. Keep in mind that the choice of approach depends on the specific use case, performance requirements, and coding style preferences.
Related benchmarks
ES6 Class vs Prototype vs Object Literal v2
ES6 Class vs Prototype vs Object Literal 4
Comparison of classes vs prototypes vs object literals also including the inheritance
ES6 Class vs Prototype vs Object Literal v2 with Extends
ES6 Class vs Prototype vs Object Literal v3
Comments
Confirm delete:
Do you really want to delete benchmark?