Benchmark: Object.setPrototypeOf vs Proxy initialization (with baseline)

HTML Preparation code:

<!--your preparation HTML code goes here-->

Script Preparation code:

 class Car {
        constructor(make, model, year, mileage = 0, fuelLevel = 100) {
            this.make = make;
            this.model = model;
            this.year = year;
            this.mileage = mileage;
            this.fuelLevel = fuelLevel;
        }

        start() {
            console.log(`${this.make} ${this.model} is starting...`);
        }

        stop() {
            console.log(`${this.make} ${this.model} is stopping...`);
        }

        drive(distance) {
            if (this.fuelLevel > 0) {
                this.mileage += distance;
                this.fuelLevel -= distance * 0.05; // Assuming 1 unit of fuel per 20 miles
                console.log(`You drove ${distance} miles. Mileage is now ${this.mileage} miles.`);
            } else {
                console.log('Not enough fuel to drive.');
            }
        }

        refuel(amount) {
            this.fuelLevel += amount;
            console.log(`Refueled ${amount}%. Fuel level is now ${this.fuelLevel}%.`);
        }

        getCarInfo() {
            return `${this.year} ${this.make} ${this.model}, Mileage: ${this.mileage} miles, Fuel Level: ${this.fuelLevel}%`;
        }
    }

function createCar() {
   
    return new Car('Toyota', 'Corolla', 2021, 5000, 100);
}

function createProperties() {
    return {
        make: 'Toyota',
        model: 'Corolla',
        year: 2021,
        mileage: 5000,
        fuelLevel: 100
    }
}

function createProto() {
    return {
        start: function() {
            console.log(`${this.make} ${this.model} is starting...`);
        },

        stop: function() {
            console.log(`${this.make} ${this.model} is stopping...`);
        },

        drive: function(distance) {
            if (this.fuelLevel > 0) {
                this.mileage += distance;
                this.fuelLevel -= distance * 0.05; // Assuming 1 unit of fuel per 20 miles
                console.log(`You drove ${distance} miles. Mileage is now ${this.mileage} miles.`);
            } else {
                console.log('Not enough fuel to drive.');
            }
        },

        refuel: function(amount) {
            this.fuelLevel += amount;
            console.log(`Refueled ${amount}%. Fuel level is now ${this.fuelLevel}%.`);
        },

        getCarInfo: function() {
            return `${this.year} ${this.make} ${this.model}, Mileage: ${this.mileage} miles, Fuel Level: ${this.fuelLevel}%`;
        }
    }
}

function extendTarget(target, proto) {
    Object.setPrototypeOf(proto, Object.getPrototypeOf(target))
    Object.setPrototypeOf(target, proto)
    return target
}

function createProxy(target) {
    return new Proxy(target, {
        get(target, key, receiver) {
            if (key in target)
                return Reflect.get(target, key, receiver)
        },
        set(target, key, value, receiver) {
            target[key] = value;
            return true;
        }
    })
}

Tests:

Object.setPrototypeOf
const extended = extendTarget(createProperties(), createProto())
Proxy
const proxy = createProxy(createCar())
Baseline Class
const object = createCar()

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object.setPrototypeOf
Proxy
Baseline Class

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 months ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36

Browser/OS: Chrome 132 on Linux

View result in a separate tab

Test name	Executions per second
Object.setPrototypeOf	474176.5 Ops/sec
Proxy	17469374.0 Ops/sec
Baseline Class	57431036.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 2 months ago):

LLMs can make mistakes. Check important info.

This benchmark tests the performance of three different approaches to creating and utilizing JavaScript objects, specifically focusing on inheritance and object extension. The key approaches being compared are:

1. **Object.setPrototypeOf**
2. **Proxy**
3. **Baseline Class**

### Details of Each Test Case

#### 1. Object.setPrototypeOf
- **Test Name**: Object.setPrototypeOf
- **Benchmark Definition**: 
  ```javascript
  const extended = extendTarget(createProperties(), createProto());
  ```
- **Description**: This approach uses `Object.setPrototypeOf` to dynamically set the prototype of an object. The `extendTarget` function takes a target object (created using `createProperties()`) and a prototype object (created using `createProto()`), then establishes the prototype chain dynamically.
- **Pros**: 
  - Flexibility in modifying prototypes at runtime.
  - Ability to inherit and extend object properties without needing class definitions.
- **Cons**: 
  - Generally slower in terms of performance due to the dynamic nature of prototype changes.
  - Using `Object.setPrototypeOf` can lead to performance penalties because it breaks the prototype chain optimization in JavaScript engines.

#### 2. Proxy
- **Test Name**: Proxy
- **Benchmark Definition**: 
  ```javascript
  const proxy = createProxy(createCar());
  ```
- **Description**: This approach utilizes the `Proxy` object, which allows the creation of a proxy for an object to intercept and redefine fundamental operations for that object. In this case, it proxies `createCar()`.
- **Pros**: 
  - Allows for more control over object behavior, such as getting and setting properties.
  - Can add custom behavior for existing methods or properties.
- **Cons**: 
  - Proxies can introduce overhead due to the additional layer, which may affect performance compared to direct object manipulation.
  - Complexity in managing proxies can lead to harder-to-read code.

#### 3. Baseline Class
- **Test Name**: Baseline Class
- **Benchmark Definition**: 
  ```javascript
  const object = createCar();
  ```
- **Description**: This is the baseline performance measurement, where an instance of a class (`Car`) is created directly using the class constructor.
- **Pros**: 
  - Simplest and most efficient approach for creating objects with inheritance.
  - Less overhead compared to modifying prototypes or using proxies.
- **Cons**: 
  - Less dynamic compared to the other two methods; all properties must be defined at the time of class creation, making it less flexible.

### Benchmark Results

- **Baseline Class:** 57,431,036 executions per second
- **Proxy:** 17,469,374 executions per second
- **Object.setPrototypeOf:** 474,176 executions per second

From the results, it is clear that the baseline class approach is the most performant, while both `Object.setPrototypeOf` and `Proxy` are significantly slower. This highlights the typical trade-off between flexibility and speed in JavaScript object manipulation.

### Conclusion and Alternatives

In conclusion, the benchmark not only evaluates the raw performance of different ways to manage inheritance but also showcases the inherent trade-offs between ease of use (flexibility) versus performance.

Other alternatives researchers and developers may consider include:

- **Composition over Inheritance**: Using composition to combine behavior from different objects as needed rather than relying on traditional inheritance hierarchies.
- **Factory Functions**: Instead of using `class`, factory functions can create objects with specified behavior while avoiding issues with `this` binding inherent in classes.
- **Functional Programming Approaches**: Using functions as first-class citizens to encapsulate behaviors without requiring the structure of classes or prototype chains.

Each approach has its place depending on the specific use case and performance requirements.

Related benchmarks:

Object.setPrototypeOf vs Proxy initialization (with baseline) (version: 1)

Comparing performance of: Object.setPrototypeOf vs Proxy vs Baseline Class

Created: 2 months ago by: Registered User

Jump to the latest result

Object.setPrototypeOf

Proxy

Baseline Class

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 2 months ago):