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

Run details:

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

Browser: Chrome 146

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 3 months ago

ES6 Class

18K/s

Function Prototype

18K/s

Object Literal

9K/s

View exact numbers

Test name	Executions per second
✓ ES6 Class	18,437 Ops/sec
Function Prototype	18,349 Ops/sec
Object Literal	9,400 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