Benchmark: ES6 Class vs Prototype vs Object Literal v2 with Extends

Script Preparation code:

class BaseClass {
    constructor() {}
}

class Point extends BaseClass {
    constructor(x, y) {
        super();
        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 Point1 = Point;

function BaseConstructor() {
}

function Point2(x, y) {
    this.x = x;
    this.y = y;
}

Point2.prototype.add = function(point) {
    return new Point2(this.x + point.x, this.y + point.y);
}

Point2.prototype.sub = function(point) {
    return new Point2(this.x - point.x, this.y - point.y);
}

Object.setPrototypeOf(Object.setPrototypeOf(Point2, BaseConstructor).prototype, BaseConstructor.prototype);

function Point3(x, y) {
    return Object.setPrototypeOf({
        x,
        y,
        add: (point) => Point3(this.x + point.x, this.y + point.y),
        sub: (point) => Point3(this.x - point.x, this.y - point.y)
    }, BaseConstructor.prototype);
}

​x
 
class BaseClass {    constructor() {}}​class Point extends BaseClass {    constructor(x, y) {        super();        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 Point1 = Point;​function BaseConstructor() {}​function Point2(x, y) {    this.x = x;    this.y = y;}​Point2.prototype.add = function(point) {    return new Point2(this.x + point.x, this.y + point.y);}​Point2.prototype.sub = function(point) {    return new Point2(this.x - point.x, this.y - point.y);}​Object.setPrototypeOf(Object.setPrototypeOf(Point2, BaseConstructor).prototype, BaseConstructor.prototype);​function Point3(x, y) {    return Object.setPrototypeOf({        x,        y,        add: (point) => Point3(this.x + point.x, this.y + point.y),        sub: (point) => Point3(this.x - point.x, this.y - point.y)    }, BaseConstructor.prototype);}

Tests:

ES6 Class

var p1 = new Point1(10, 10);
var p2 = new Point1(10, -10);
var sum = p1.add(p2);
var dif = p1.sub(p2);

 
var p1 = new Point1(10, 10);var p2 = new Point1(10, -10);var sum = p1.add(p2);var dif = p1.sub(p2);

Function Prototype
var p1 = new Point2(10, 10); var p2 = new Point2(10, -10); var sum = p1.add(p2); var dif = p1.sub(p2);
var p1 = new Point2(10, 10);
var p2 = new Point2(10, -10);
var sum = p1.add(p2);
var dif = p1.sub(p2);
Object Literal
var p1 = Point3(10, 10); var p2 = Point3(10, -10); var sum = p1.add(p2); var dif = p1.sub(p2);
var p1 = Point3(10, 10);
var p2 = Point3(10, -10);
var sum = p1.add(p2);
var dif = p1.sub(p2);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
ES6 Class
Function Prototype
Object Literal

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 months ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36

Browser/OS: Chrome 132 on Linux

View result in a separate tab

Test name	Executions per second
ES6 Class	32088148.0 Ops/sec
Function Prototype	51813656.0 Ops/sec
Object Literal	405987.8 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

Let's break down the provided benchmark and explain what's being tested, compared, and considered.

Benchmark Definition:

The benchmark tests three different techniques for constructing class objects in JavaScript:

ES6 Class: Using the class keyword to define a class.
Function Prototype: Using functions as constructors with prototype chaining.
Object Literal: Using an object literal with prototype inheritance.

Script Preparation Code:

The script defines three classes:

BaseClass: A base class with a constructor that does nothing.
Point (extends BaseClass): A class that extends BaseClass and has methods for adding and subtracting points.
Point2 (using function prototype): A class that uses a function as its constructor, which returns an object with properties and methods.
Point3 (using object literal): An object literal that sets up the prototype chain for Point2.

Individual Test Cases:

Each test case creates two instances of each class (p1 and p2) with different values for x and y, and then calls the add() and sub() methods on these instances. The benchmark measures the execution time and memory usage for each test case.

Comparison:

The benchmark compares the performance of the three techniques:

ES6 Class
Function Prototype (Point2)
Object Literal (Point3)

Pros and Cons:

ES6 Class:
- Pros: More concise and expressive syntax, better support for inheritance and polymorphism.
- Cons: May have performance overhead due to the syntax, and some older browsers may not support it.
Function Prototype (Point2):
- Pros: Lightweight and flexible, can be used in older browsers that don't support classes.
- Cons: Requires more code to set up the prototype chain, and can be less readable than class-based syntax.
Object Literal (Point3):
- Pros: Extremely lightweight and efficient, can be used with any browser that supports prototypes.
- Cons: Requires manual setup of the prototype chain, which can be error-prone and less readable.

Library/Features Used:

class keyword (ES6)
Function prototype (Point2)
Object literals (Point3)
super() keyword (used in ES6 Class)

Special JS Features/Syntax:

The benchmark uses some modern JavaScript features, such as:

extends keyword (used in ES6 Class and Function Prototype)
super() keyword (used in ES6 Class)
Object literal syntax (Point3)
Template literals (Point3, e.g., return Point3(this.x + point.x, this.y + point.y))

Alternatives:

If you don't want to use classes or function prototypes, you can also consider using:

Objects with methods: You can create an object and attach methods to it using the method() syntax.
Modules: You can use modules (e.g., CommonJS, ES6 imports) to organize your code and avoid prototype pollution.

Keep in mind that these alternatives may have different trade-offs in terms of performance, readability, and maintainability.

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested, compared, and considered.

**Benchmark Definition:**

The benchmark tests three different techniques for constructing class objects in JavaScript:

1. **ES6 Class**: Using the `class` keyword to define a class.
2. **Function Prototype**: Using functions as constructors with prototype chaining.
3. **Object Literal**: Using an object literal with prototype inheritance.

**Script Preparation Code:**

The script defines three classes:

* `BaseClass`: A base class with a constructor that does nothing.
* `Point` (extends `BaseClass`): A class that extends `BaseClass` and has methods for adding and subtracting points.
* `Point2` (using function prototype): A class that uses a function as its constructor, which returns an object with properties and methods.
* `Point3` (using object literal): An object literal that sets up the prototype chain for `Point2`.

**Individual Test Cases:**

Each test case creates two instances of each class (`p1` and `p2`) with different values for `x` and `y`, and then calls the `add()` and `sub()` methods on these instances. The benchmark measures the execution time and memory usage for each test case.

**Comparison:**

The benchmark compares the performance of the three techniques:

* ES6 Class
* Function Prototype (`Point2`)
* Object Literal (`Point3`)

**Pros and Cons:**

1. **ES6 Class**:
	* Pros: More concise and expressive syntax, better support for inheritance and polymorphism.
	* Cons: May have performance overhead due to the syntax, and some older browsers may not support it.
2. **Function Prototype** (`Point2`):
	* Pros: Lightweight and flexible, can be used in older browsers that don't support classes.
	* Cons: Requires more code to set up the prototype chain, and can be less readable than class-based syntax.
3. **Object Literal** (`Point3`):
	* Pros: Extremely lightweight and efficient, can be used with any browser that supports prototypes.
	* Cons: Requires manual setup of the prototype chain, which can be error-prone and less readable.

**Library/Features Used:**

* `class` keyword (ES6)
* Function prototype (`Point2`)
* Object literals (`Point3`)
* `super()` keyword (used in ES6 Class)

**Special JS Features/Syntax:**

The benchmark uses some modern JavaScript features, such as:

* `extends` keyword (used in ES6 Class and Function Prototype)
* `super()` keyword (used in ES6 Class)
* Object literal syntax (`Point3`)
* Template literals (`Point3`, e.g., `return Point3(this.x + point.x, this.y + point.y)`)

**Alternatives:**

If you don't want to use classes or function prototypes, you can also consider using:

* **Objects with methods**: You can create an object and attach methods to it using the `method()` syntax.
* **Modules**: You can use modules (e.g., CommonJS, ES6 imports) to organize your code and avoid prototype pollution.

Keep in mind that these alternatives may have different trade-offs in terms of performance, readability, and maintainability.

Related benchmarks:

ES6 Class vs Prototype vs Object Literal v2 with Extends (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: one year ago by: Guest

Jump to the latest result