Benchmark: Classes vs Prototype

Tests:

Classes
"use strict"; function _instanceof(left, right) { if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) { return right[Symbol.hasInstance](left); } else { return left instanceof right; } } function _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } var Person = /*#__PURE__*/ function () { function Person() { _classCallCheck(this, Person); this.spoken = ''; } _createClass(Person, [{ key: "speak", value: function speak(frase) { this.spoken += "".concat(frase, ". "); } }]); return Person; }(); var person = new Person(); person.speak('Hello world'); person.speak('Anybody out there?'); person.speak('Ok Im out!');
Prototype
function Person () { this.spoken = '' } Person.prototype.speak = function (frase) { this.spoken += frase + '. ' } var person = new Person() person.speak('Hello world'); person.speak('Anybody out there?'); person.speak('Ok Im out!');

Historical Performance Data aggregated from 14 community runs

Desktop Results:

Chrome 9 runs

Prototype

508K/s

Classes

384K/s

Fastest: Prototype (1.3x faster)

View exact numbers

✓ Prototype: 507,568 ops/sec
• Classes: 384,324 ops/sec

Firefox 5 runs

Prototype

344K/s

Classes

226K/s

Fastest: Prototype (1.5x faster)

View exact numbers

✓ Prototype: 344,113 ops/sec
• Classes: 225,939 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: one year ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:128.0) Gecko/20100101 Firefox/128.0

Browser/OS: Firefox 128 on Linux

View result in a separate tab

Prototype

337K/s

Classes

226K/s

View exact numbers

Test name	Executions per second
✓ Prototype	336,569 Ops/sec
Classes	225,939 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 JSON and explain what is being tested.

**Benchmark Definition**

The benchmark definition is a set of JavaScript code that defines two test cases: "Classes" and "Prototype". The main difference between these two test cases lies in how they define and create instances of a `Person` class.

**Test Cases**

There are only two test cases, but let's examine them closely:

### Classes

This test case uses the `var Person = ...;` syntax to define a constructor function. It creates an instance of the `Person` class using the `new` keyword and then calls its `speak` method.

```javascript
function _instanceof(left, right) { ...
function _classCallCheck(instance, Constructor) { ...
function _defineProperties(target, props) { ...

var Person = /*...*/;
var person = new Person();
person.speak('Hello world');
person.speak('Anybody out there?');
person.speak('Ok Im out!');
```

### Prototype

This test case uses the `Person.prototype` syntax to define and create instances of a `Person` class. It creates an instance of the `Person` class using the `new` keyword and then calls its `speak` method.

```javascript
function _instanceof(left, right) { ...
function _classCallCheck(instance, Constructor) { ...

var Person = function () {
  this.spoken = '';
};

Person.prototype.speak = function (frase) {
  this.spoken += frase + '. ';
};
var person = new Person();
person.speak('Hello world');
person.speak('Anybody out there?');
person.speak('Ok Im out!');
```

**Options being compared**

The main difference between these two test cases is how they define and create instances of a `Person` class:

* **Classes**: uses the constructor function syntax (`var Person = ...;`)
* **Prototype**: uses the prototype syntax (`Person.prototype = ...;`)

**Pros and Cons**

Here are some pros and cons of each approach:

### Classes

Pros:

* Easier to read and understand, especially for beginners
* More explicit way of defining classes and instances
* Less prone to errors due to the more structured syntax

Cons:

* Not as common in modern JavaScript development
* May require more boilerplate code (e.g., defining a constructor function)

### Prototype

Pros:

* More commonly used in modern JavaScript development, especially for functional programming
* Allows for more flexible and dynamic class definitions
* Less boilerplate code required

Cons:

* Can be harder to read and understand, especially for beginners
* May lead to errors due to the less explicit syntax

**Library**

There is no specific library being tested here. The `Person` class is a simple example of a JavaScript class.

**Special JS feature or syntax**

The test case uses some older ES6 syntax features, such as:

* `_instanceof`, `_classCallCheck`, and `_defineProperties` are functions that were introduced in ES2015 (ECMAScript 2015)
* The `/*...*/` syntax is used to define the constructor function of the `Person` class. This syntax was introduced in ES2015.

Overall, this benchmark tests the performance difference between defining classes using a constructor function versus using the prototype syntax.

Classes vs Prototype (version: 0)

Comparing performance of: `Classes vs Prototype`

Created: 7 years ago by: Guest

Go to the latest result

Classes

Prototype

Historical Performance Data aggregated from 14 community runs

Desktop Results:

Chrome 9 runs

Firefox 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Classes vs Prototype (version: 0)

Comparing performance of: Classes vs Prototype

Created: 7 years ago by: Guest

Go to the latest result

Classes

Prototype

Historical Performance Data aggregated from 14 community runs

Desktop Results:

Chrome 9 runs

Firefox 5 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`