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

Run details:

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

Browser: Firefox 152

Operating system: Windows

Device Platform: Desktop

Date tested: 21 days ago

ES6 Class

12K/s

Function Prototype

11K/s

Object Literal

3K/s

View exact numbers

Test name	Executions per second
✓ ES6 Class	11,513 Ops/sec
Function Prototype	11,487 Ops/sec
Object Literal	3,426 Ops/sec

Script Preparation code:

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

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.

ES6 Class

Function Prototype

Object Literal