Run results for: Class vs bind vs hook

Run details:

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

Browser: Chrome 124

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 2 years ago

Class (reused)

5/s

Class

5/s

Hook

5/s

Bind

5/s

View exact numbers

Test name	Executions per second
✓ Class (reused)	5 Ops/sec
Class	5 Ops/sec
Hook	5 Ops/sec
Bind	5 Ops/sec

Script Preparation code:

class TestClass {
    ctx = {index: 0};

    constructor(ctx) {
        this.ctx = ctx;
    }

    callback() {
        this.ctx.index += 1;
        console.log(this.ctx.index);
    }
}

function testFunction() {
    this.ctx.index += 1;
    console.log(this.ctx.index);
}

function useTestFunction(ctx) {
    return () => {
        ctx.index += 1;
        console.log(ctx.index);
    }
}

document.addEventListener('test1', () => {
    console.clear();

    const ctx = {index: 0};
    while (ctx.index < 100000) {
        const item = new TestClass(ctx);
        item.callback();
    }
});

document.addEventListener('test2', () => {
    console.clear();

    const ctx = {index: 0};
    while (ctx.index < 100000) {
        const callback = testFunction.bind({ctx});
        callback();
    }
});

document.addEventListener('test3', () => {
    console.clear();

    const ctx = {index: 0};
    while (ctx.index < 100000) {
        const callback = useTestFunction(ctx);
        callback();
    }
});

document.addEventListener('test4', () => {
    console.clear();

    const ctx = {index: 0};
    const item = new TestClass(ctx);
    while (ctx.index < 100000) {
        item.callback();
    }
});

Tests:

Class
document.dispatchEvent(new CustomEvent('test1'));
Bind
document.dispatchEvent(new CustomEvent('test2'));
Hook
document.dispatchEvent(new CustomEvent('test3'));
Class (reused)
document.dispatchEvent(new CustomEvent('test4'));

Run results for: Class vs bind vs hook

This test measures the speed of making and running a class method vs bound function vs hook created function

Class

Bind

Hook

Class (reused)