Run results for: Object.setPrototypeOf vs Proxy initialization (with baseline)

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36

Browser: Chrome 132

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 2 months ago

Test name	Executions per second
Object.setPrototypeOf	569413.6 Ops/sec
Proxy	24153164.0 Ops/sec
Baseline Class	80788760.0 Ops/sec

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()

Run results for: Object.setPrototypeOf vs Proxy initialization (with baseline)

Object.setPrototypeOf

Proxy

Baseline Class