Benchmark: Class vs object: direct call vs bind vs apply

Script Preparation code:

class Foo1 {
    property = 5;
    method() {
        this.property += 1;
    }
}

function Bar1() {
    return {
        property: 5,
        method() {
            this.property += 1;
        }
    };
}

function Bar2() {
    let property = 5;
    return {
        method: () => {
            property += 1;
        }
    };
}

var foo1 = new Foo1();
var foo1Apply = foo1.method;
var foo1Bind = foo1.method.bind(foo1);

var bar1 = Bar1();
var bar1Apply = bar1.method;
var bar1Bind = bar1.method.bind(bar1);

var bar2 = Bar2();
var bar2Variable = bar2.method;

​x
 
class Foo1 {    property = 5;    method() {        this.property += 1;    }}​function Bar1() {    return {        property: 5,        method() {            this.property += 1;        }    };}​function Bar2() {    let property = 5;    return {        method: () => {            property += 1;        }    };}​var foo1 = new Foo1();var foo1Apply = foo1.method;var foo1Bind = foo1.method.bind(foo1);​var bar1 = Bar1();var bar1Apply = bar1.method;var bar1Bind = bar1.method.bind(bar1);​var bar2 = Bar2();var bar2Variable = bar2.method;

Tests:

Class: direct
foo1.method();
foo1.method();
Class: apply
foo1Apply.apply(foo1);
foo1Apply.apply(foo1);
Class: bind
foo1Bind();
foo1Bind();
Object literal: direct
bar1.method();
bar1.method();
Object literal: apply
bar1Apply.apply(bar1);
bar1Apply.apply(bar1);
Object literal: bind
bar1Bind();
bar1Bind();
Object with context: direct
bar2.method();
bar2.method();
Object with context: variable
bar2Variable();
bar2Variable();

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
Class: direct
Class: apply
Class: bind
Object literal: direct
Object literal: apply
Object literal: bind
Object with context: direct
Object with context: variable

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/118.0

Browser/OS: Firefox 118 on Windows

View result in a separate tab

Test name	Executions per second
Class: direct	398258880.0 Ops/sec
Class: apply	279955200.0 Ops/sec
Class: bind	55733584.0 Ops/sec
Object literal: direct	282577888.0 Ops/sec
Object literal: apply	289969504.0 Ops/sec
Object literal: bind	55094104.0 Ops/sec
Object with context: direct	394821344.0 Ops/sec
Object with context: variable	277841920.0 Ops/sec

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

I'll explain the benchmark and its results in detail.

Benchmark Overview

The benchmark tests four different ways to call a method on an object or class instance:

Class: Direct call (i.e., foo1.method() or bar1.method())
Object literal: Direct call (i.e., bar1.method() without apply() or bind())
Object literal: Apply (i.e., bar1Apply.apply(bar1))
Class: Bind (i.e., foo1Bind())

Options Compared

The benchmark compares the execution performance of each method calling approach.

Direct call: Calls the method on the object or class instance directly.
Apply: Uses the apply() method to call the method on the object or class instance, passing the context as an argument.
Bind: Uses the bind() method to create a new function that calls the method on the object or class instance, with the original context.

Pros and Cons

Here are some pros and cons of each approach:

Direct call:
- Pros: Simple, efficient, and widely supported.
- Cons: May lead to performance issues if the context is not passed correctly.
Apply:
- Pros: Allows for flexible context passing, can be used with any function.
- Cons: May incur overhead due to the additional function call.
Bind:
- Pros: Creates a new function that is bound to the original context, which can improve performance in some cases.
- Cons: May lead to increased memory usage and complexity.

Libraries and Features

There are no libraries used in this benchmark. However, it does rely on some JavaScript features, such as:

class and constructor syntax for defining classes.
Function expressions (e.g., () => { ... }) for defining methods.
The bind() method for creating bound functions.

Other Alternatives

Some alternative approaches to calling methods on objects or class instances include:

Using a proxy object to intercept method calls and manipulate the context.
Using a decorator pattern to wrap the original function with additional logic.
Using a higher-order function (e.g., curry()) to pre-wound the function call.

These alternatives may offer performance benefits or improved flexibility in certain scenarios, but they often add complexity and may not be suitable for all use cases.

LLMs can make mistakes. Check important info.

I'll explain the benchmark and its results in detail.

**Benchmark Overview**

The benchmark tests four different ways to call a method on an object or class instance:

1. **Class**: Direct call (i.e., `foo1.method()` or `bar1.method()`)
2. **Object literal**: Direct call (i.e., `bar1.method()` without `apply()` or `bind()`)
3. **Object literal**: Apply (i.e., `bar1Apply.apply(bar1)`)
4. **Class**: Bind (i.e., `foo1Bind()`)

**Options Compared**

The benchmark compares the execution performance of each method calling approach.

* Direct call: Calls the method on the object or class instance directly.
* Apply: Uses the `apply()` method to call the method on the object or class instance, passing the context as an argument.
* Bind: Uses the `bind()` method to create a new function that calls the method on the object or class instance, with the original context.

**Pros and Cons**

Here are some pros and cons of each approach:

* **Direct call**:
	+ Pros: Simple, efficient, and widely supported.
	+ Cons: May lead to performance issues if the context is not passed correctly.
* **Apply**:
	+ Pros: Allows for flexible context passing, can be used with any function.
	+ Cons: May incur overhead due to the additional function call.
* **Bind**:
	+ Pros: Creates a new function that is bound to the original context, which can improve performance in some cases.
	+ Cons: May lead to increased memory usage and complexity.

**Libraries and Features**

There are no libraries used in this benchmark. However, it does rely on some JavaScript features, such as:

* `class` and `constructor` syntax for defining classes.
* Function expressions (e.g., `() => { ... }`) for defining methods.
* The `bind()` method for creating bound functions.

**Other Alternatives**

Some alternative approaches to calling methods on objects or class instances include:

* Using a proxy object to intercept method calls and manipulate the context.
* Using a decorator pattern to wrap the original function with additional logic.
* Using a higher-order function (e.g., `curry()`) to pre-wound the function call.

These alternatives may offer performance benefits or improved flexibility in certain scenarios, but they often add complexity and may not be suitable for all use cases.

Related benchmarks:

Class vs object: direct call vs bind vs apply (version: 0)

Comparing performance of: Class: direct vs Class: apply vs Class: bind vs Object literal: direct vs Object literal: apply vs Object literal: bind vs Object with context: direct vs Object with context: variable

Created: 2 years ago by: Registered User

Jump to the latest result

Class: direct

Class: apply

Class: bind

Object literal: direct

Object literal: apply

Object literal: bind

Object with context: direct

Object with context: variable

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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