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);
}

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);
Function Prototype
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);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
ES6 Class
Function Prototype
Object Literal

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

User agent: Mozilla/5.0 (iPad; CPU OS 18_7 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.4.2 Mobile/15E148 Safari/604.1 Brave

Browser/OS: Mobile Safari 26 on iOS 18.7

View result in a separate tab

Test name	Executions per second
ES6 Class	319007776.0 Ops/sec
Function Prototype	353889856.0 Ops/sec
Object Literal	955783.8 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

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: 2 years ago by: Guest

Jump to the latest result

ES6 Class

Function Prototype

Object Literal

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):