Benchmark: alternative this: constructor vs literal

Script Preparation code:

let scopeX = 0;


function Constructor(f) {
  return Object.setPrototypeOf(f, Constructor.prototype);
};
Constructor.prototype = {
  get x() {
    return scopeX;
  },
  y() {
    scopeX = scopeX + 1;
  }
};
Object.setPrototypeOf(Constructor, Function);
Object.setPrototypeOf(Constructor.prototype, Function.prototype);
var makeConstructor = name => new Constructor(({
  [name]() {
    return "My name is\n" + name;
  }
})[name]);
var aConstructor = makeConstructor("Chika-chika\nSlim Shady");


literalPrototype = {
  get x() {
    return scopeX;
  },
  y() {
    scopeX = scopeX + 1;
  }
};
Object.setPrototypeOf(literalPrototype, Function.prototype);
var makeLiteral = name => Object.setPrototypeOf(({
  [name]() {
    return "My name is\n" + name;
  }
})[name], literalPrototype);
var aLiteral = makeConstructor("Chika-chika\nSlim Shady");

​x
 
let scopeX = 0;​​function Constructor(f) {  return Object.setPrototypeOf(f, Constructor.prototype);};Constructor.prototype = {  get x() {    return scopeX;  },  y() {    scopeX = scopeX + 1;  }};Object.setPrototypeOf(Constructor, Function);Object.setPrototypeOf(Constructor.prototype, Function.prototype);var makeConstructor = name => new Constructor(({  [name]() {    return "My name is\n" + name;  }})[name]);var aConstructor = makeConstructor("Chika-chika\nSlim Shady");​​literalPrototype = {  get x() {    return scopeX;  },  y() {    scopeX = scopeX + 1;  }};Object.setPrototypeOf(literalPrototype, Function.prototype);var makeLiteral = name => Object.setPrototypeOf(({  [name]() {    return "My name is\n" + name;  }})[name], literalPrototype);var aLiteral = makeConstructor("Chika-chika\nSlim Shady");​​​

Tests:

makeConstructor
const aConstructor = makeConstructor("Chika-chika\nSlim Shady");
const aConstructor = makeConstructor("Chika-chika\nSlim Shady");
makeLiteral
var aLiteral = makeConstructor("Chika-chika\nSlim Shady");
var aLiteral = makeConstructor("Chika-chika\nSlim Shady");
invoke aConstructor
aConstructor();
aConstructor();
invoke aLiteral
aLiteral();
aLiteral();
invoke prototype method aConstructor
aConstructor.y()
aConstructor.y()
invoke prototype method aLiteral
aLiteral.y();
aLiteral.y();
getter aConstructor
const value = aConstructor.x;
const value = aConstructor.x;
getter aLiteral
const value = aLiteral.x;
const value = aLiteral.x;

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
makeConstructor
makeLiteral
invoke aConstructor
invoke aLiteral
invoke prototype method aConstructor
invoke prototype method aLiteral
getter aConstructor
getter aLiteral

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 4 years ago)

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

Browser/OS: Chrome 89 on Windows

View result in a separate tab

Test name	Executions per second
makeConstructor	835984.8 Ops/sec
makeLiteral	873508.4 Ops/sec
invoke aConstructor	10111645.0 Ops/sec
invoke aLiteral	10260750.0 Ops/sec
invoke prototype method aConstructor	9628953.0 Ops/sec
invoke prototype method aLiteral	10018681.0 Ops/sec
getter aConstructor	10158993.0 Ops/sec
getter aLiteral	10195548.0 Ops/sec

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

Benchmark Overview

MeasureThat.net provides a JavaScript microbenchmarking platform, where users can create and run their own benchmarks to compare the performance of different approaches. The provided benchmark measures the performance of two ways to create objects in JavaScript: using the Constructor function and literal object creation.

Constructor vs Literal Object Creation

The benchmark compares the execution speed of two approaches:

Constructor: This approach uses a custom Constructor function to define an object prototype with getters and setters.
Literal Object Creation: This approach uses the standard syntax to create a literal object prototype with getters and setters.

Options Compared

Both approaches are compared in terms of their performance, specifically:

The execution speed of calling the constructor and its methods
The execution speed of accessing getters (e.g., aConstructor.x)
The execution speed of invoking methods on the object prototype (e.g., aConstructor.y())

Pros and Cons

Constructor:
- Pros:
  - Can be used to create objects with complex prototypes
  - Can provide more control over the object's behavior
- Cons:
  - May lead to increased overhead due to the use of a custom function
  - May require additional setup and maintenance
Literal Object Creation:
- Pros:
  - Is the standard syntax used in JavaScript
  - May be faster due to reduced overhead
- Cons:
  - Limited control over the object's behavior
  - May not support complex prototypes or custom function calls

Libraries and Special Features

This benchmark does not use any external libraries. However, it relies on standard JavaScript features such as classes, getters, and setters.

Other Alternatives

ES6 Classes: Another approach to creating objects with complex prototypes is using ES6 classes.
Object.create(): This method can be used to create an object from a prototype, which may provide similar performance characteristics to literal object creation.

To run this benchmark, you would:

Create a new project in MeasureThat.net
Copy the provided Benchmark Definition and Individual test code into your project
Run the benchmark using the platform's UI or API

Please note that the results of this benchmark may vary depending on the specific JavaScript engine, browser, and environment used to run it.

LLMs can make mistakes. Check important info.

**Benchmark Overview**

MeasureThat.net provides a JavaScript microbenchmarking platform, where users can create and run their own benchmarks to compare the performance of different approaches. The provided benchmark measures the performance of two ways to create objects in JavaScript: using the `Constructor` function and literal object creation.

**Constructor vs Literal Object Creation**

The benchmark compares the execution speed of two approaches:

1. **Constructor**: This approach uses a custom `Constructor` function to define an object prototype with getters and setters.
2. **Literal Object Creation**: This approach uses the standard syntax to create a literal object prototype with getters and setters.

**Options Compared**

Both approaches are compared in terms of their performance, specifically:

* The execution speed of calling the constructor and its methods
* The execution speed of accessing getters (e.g., `aConstructor.x`)
* The execution speed of invoking methods on the object prototype (e.g., `aConstructor.y()`)

**Pros and Cons**

1. **Constructor**:
	* Pros:
		+ Can be used to create objects with complex prototypes
		+ Can provide more control over the object's behavior
	* Cons:
		+ May lead to increased overhead due to the use of a custom function
		+ May require additional setup and maintenance
2. **Literal Object Creation**:
	* Pros:
		+ Is the standard syntax used in JavaScript
		+ May be faster due to reduced overhead
	* Cons:
		+ Limited control over the object's behavior
		+ May not support complex prototypes or custom function calls

**Libraries and Special Features**

This benchmark does not use any external libraries. However, it relies on standard JavaScript features such as classes, getters, and setters.

**Other Alternatives**

1. **ES6 Classes**: Another approach to creating objects with complex prototypes is using ES6 classes.
2. **Object.create()**: This method can be used to create an object from a prototype, which may provide similar performance characteristics to literal object creation.

To run this benchmark, you would:

1. Create a new project in MeasureThat.net
2. Copy the provided Benchmark Definition and Individual test code into your project
3. Run the benchmark using the platform's UI or API

Please note that the results of this benchmark may vary depending on the specific JavaScript engine, browser, and environment used to run it.

Related benchmarks:

alternative this: constructor vs literal (version: 0)

Comparing performance of: makeConstructor vs makeLiteral vs invoke aConstructor vs invoke aLiteral vs invoke prototype method aConstructor vs invoke prototype method aLiteral vs getter aConstructor vs getter aLiteral

Created: 4 years ago by: Guest

Jump to the latest result

makeConstructor

makeLiteral

invoke aConstructor

invoke aLiteral

invoke prototype method aConstructor

invoke prototype method aLiteral

getter aConstructor

getter aLiteral

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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