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; rv:149.0) Gecko/20100101 Firefox/149.0

Browser: Firefox 149

Operating system: Mac OS X 10.15

Device Platform: Desktop

Date tested: 3 months ago

ES6 Class

10K/s

Object Literal

6K/s

Function Prototype

6K/s

View exact numbers

Test name	Executions per second
✓ ES6 Class	10,193 Ops/sec
Object Literal	6,371 Ops/sec
Function Prototype	5,742 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