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

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:140.0) Gecko/20100101 Firefox/140.0

Browser: Firefox 140

Operating system: Linux

Device Platform: Desktop

Date tested: one month ago

Function Prototype

4K/s

ES6 Class

4K/s

Object Literal

1K/s

View exact numbers

Test name	Executions per second
✓ Function Prototype	4,155 Ops/sec
ES6 Class	4,098 Ops/sec
Object Literal	1,435 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