Benchmark: Class vs Prototype Performance

Script Preparation code:

function PersonFunction(s) {
  this.e = 'hello '+s;
}

PersonFunction.prototype.say = function(){
	console.log(this.e)
}

class PersonClass{
	constructor(s){
    	this.e = 'hello '+s;
    }

	say(){
		console.log(this.e)
	}
}

Tests:

Classes
var person1 = new PersonFunction('world');
Prototype
var person2 = new PersonClass('world');

Historical Performance Data aggregated from 37 community runs

Desktop Results:

Chrome 37 runs

Classes

92.0M/s

Prototype

82.4M/s

Fastest: Classes (1.1x faster)

View exact numbers

✓ Classes: 91,971,736 ops/sec
• Prototype: 82,352,832 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Classes
Prototype

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: yesterday)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/153.0.0.0 Safari/537.36 Edg/153.0.0.0

Browser/OS: Chrome 153 on Windows

View result in a separate tab

Classes

451.2M/s

Prototype

368.0M/s

View exact numbers

Test name	Executions per second
✓ Classes	451,168,608 Ops/sec
Prototype	367,950,336 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided JSON represents a JavaScript microbenchmark test case on MeasureThat.net. The benchmark compares the performance of two approaches: classes and prototypes.

**What is being tested?**

In this test, a `PersonFunction` constructor is defined to create instances of the `Person` class. Each instance has an "e" property initialized with a string concatenation expression. A `say()` method is also defined on both the prototype and class implementations of the `Person` class.

The benchmark tests how fast these two approaches execute, specifically:

1. Creating instances of `PersonFunction` (classes approach)
2. Creating instances of `PersonClass` (prototype approach)

**Options compared**

Two options are being compared:

A) **Classes**: This approach uses a class definition to create instances of the `Person` class. The class has its own properties and methods, including the `say()` method.

B) **Prototype**: This approach uses a constructor function (`PersonFunction`) that defines a prototype with a `say()` method. Instances of this function are created using the `new` keyword.

**Pros and Cons**

### Classes (A)

Pros:

* Easier to read and understand, especially for developers familiar with object-oriented programming (OOP) concepts.
* Can be used to encapsulate data and behavior, making code more organized and maintainable.

Cons:

* Requires explicit declaration of the class name and instance properties.
* May have performance overhead due to the need for a class definition and instance creation.

### Prototypes (B)

Pros:

* Allows for more flexibility in creating instances without the need for an explicit class declaration.
* Can be used to create objects with dynamic property names or methods.

Cons:

* Requires manual management of properties and methods on the prototype chain.
* May lead to tighter coupling between classes, making it harder to modify individual components without affecting others.

**Library**

The `PersonClass` is a custom class implementation, likely created for this benchmark. It's not a standard JavaScript library or framework, but rather a simple example used to demonstrate class-based inheritance and encapsulation in JavaScript.

**Special JS Feature/Syntax**

There are no special features or syntaxes being tested in this benchmark. The code uses standard JavaScript features like classes, prototypes, and constructor functions.

**Alternatives**

If you're looking for alternative ways to create instances of a class-like object, consider the following:

1. **Constructors as Functions**: Instead of using a class definition, you can use a function constructor with `this` binding to create objects.
2. **ES6 Classes (without the "class" keyword)**: Before ES6 classes were introduced, developers used the `function Class()` syntax or the `Class = function(){...}` method to define class-like constructors.
3. **Prototypal inheritance**: You can achieve similar behavior using prototypal inheritance by setting up a prototype chain with constructor functions.

Keep in mind that each of these alternatives has its own trade-offs and may not provide the exact same benefits or drawbacks as classes or prototypes.

Class vs Prototype Performance (version: 0) Benchmark.js

Comparing performance of: `Classes vs Prototype`

Created: 5 years ago by: Guest

Go to the latest result

Classes

Prototype

Historical Performance Data aggregated from 37 community runs

Desktop Results:

Chrome 37 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Class vs Prototype Performance (version: 0) Benchmark.js

Comparing performance of: Classes vs Prototype

Created: 5 years ago by: Guest

Go to the latest result

Classes

Prototype

Historical Performance Data aggregated from 37 community runs

Desktop Results:

Chrome 37 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `Classes vs Prototype`