MeasureThat.net

Run results for: Instantiation via ES6 Class vs Prototype vs Object Literal

Test the speed and memory usage using 3 different techniques for constructing class objects.

Go to the benchmark
Run details:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36
Chrome 114
Windows
Desktop
one year ago
Test name Executions per second
ES6 Class 314.2 Ops/sec
Function Prototype 406.2 Ops/sec
Object Literal 379.3 Ops/sec
Script Preparation code:
​x
 
class PointClass {
    constructor(x, y){
        this.x = x;
        this.y = y;
    }
​
    add(point){
        return new PointClass(this.x + point.x, this.y + point.y);
    }
​
    sub(point){
        return new PointClass(this.x - point.x, this.y - point.y);
    }
}
​
function PointProto(x, y){
    this.x = x;
    this.y = y;
}
​
PointProto.prototype.add = function(point){
    return new PointProto(this.x + point.x, this.y + point.y);
}
​
PointProto.prototype.sub = function(point){
    return new PointProto(this.x - point.x, this.y - point.y);
}
​
function PointFactory(x, y){
    return {
        x, 
        y, 
        add: (point)=>PointFactory(this.x + point.x, this.y + point.y),
        sub: (point)=>PointFactory(this.x - point.x, this.y - point.y)
    }  
}
​
​
window.PointClass = PointClass
window.PointProto = PointProto
window.PointFactory = PointFactory
window.num = 10_000
Tests:

  • ES6 Class

     
    const points = []
    ​
    for (let index = 0; index < num; index++) {
      points.push(new PointClass(10, 10))
    }

  • Function Prototype

     
    const points = []
    ​
    for (let index = 0; index < num; index++) {
      points.push(new PointProto(10, 10))
    }

  • Object Literal

     
    const points = []
    ​
    for (let index = 0; index < num; index++) {
      points.push(PointFactory(10, 10))
    }