Benchmark: ES6 Class vs Prototype vs Object Literal 3

ES6 Class vs Prototype vs Object Literal 3 (version: 0)

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

Comparing performance of: ES6 Class vs Function Prototype vs Object Literal vs ES6 Class (inheritance) vs Function Prototype (inheritance) vs Object Literal (inheritance) vs Inline Object Literal vs Inline Object Literal (inheritance) vs Spread Object Literal vs Spread Object Literal (inheritance) vs Modified ES6 Class vs Modified ES6 Class (inheritance) vs Modified Properties ES6 Class vs Modified Properties ES6 Class (inheritance) vs Static Initializer Modified Properties ES6 Class vs Static Initializer Modified Properties ES6 Class (inheritance)

Created: 2 years ago by: Guest

Jump to the latest result

Script Preparation code:

var Point1 = class Point1 {
	constructor(x, y){
		this.x = x;
		this.y = y;
    }

	add(point){
		return new Point1(this.x + point.x, this.y + point.y);
    }

	sub(point){
		return new Point1(this.x - point.x, this.y - point.y);
    }
}

var Point1b = class Point1b extends Point1 {
	addb(point){
		return new Point1b(this.x + point.x, this.y + point.y);
    }

	subb(point){
		return new Point1b(this.x - point.x, this.y - point.y);
    }
}

function Point2(x, y) {
	this.x = x;
	this.y = y;
}

Point2.prototype.add = function add(point){
    return new Point2(this.x + point.x, this.y + point.y);
}

Point2.prototype.sub = function sub(point){
	return new Point2(this.x - point.x, this.y - point.y);
}

function Point2b(x, y) {
	Point2.call(this, x, y);
}
Object.setPrototypeOf(Point2b.prototype, Point2.prototype);
//Point2b.prototype = Object.create(Point2.prototype);
//Point2b.prototype.constructor = Point2b;

Point2b.prototype.addb = function addb(point){
    return new Point2b(this.x + point.x, this.y + point.y);
}

Point2b.prototype.subb = function subb(point){
	return new Point2b(this.x - point.x, this.y - point.y);
}

const add = (x,y) => function add(point){
    return Point3(x + point.x, y + point.y);
}

const sub = (x,y) => function sub(point){
	return Point3(x - point.x, y - point.y);
}

function Point3(x, y){
	return {
      	x, 
      	y, 
        add: add(x,y),
        sub: sub(x,y)
    }  
}

const addb = (x,y) => function addb(point){
    return Point3b(x + point.x, y + point.y);
}

const subb = (x,y) => function subb(point){
	return Point3b(x - point.x, y - point.y);
}

function Point3b(x, y){
	return {
      	__proto__: new Point3(x, y),
        addb: addb(x,y),
        subb: subb(x,y)
    }  
}

function Point4(x, y){
	return {
      	x, 
      	y,
      	add: (point)=>Point4(x + point.x, y + point.y),
	 	sub: (point)=>Point4(x - point.x, y - point.y)
    }  
}

function Point4b(x, y){
	return {
      	__proto__: Point4(x, y),
      	addb: (point)=>Point4b(x + point.x, y + point.y),
	 	subb: (point)=>Point4b(x - point.x, y - point.y)
    }  
}

const point5common = (x, y) => ({
  	add(point){
    	return Point5(x + point.x, y + point.y);
	},
  	sub(point){
		return Point5(x - point.x, y - point.y);
	}
});

function Point5(x, y) {
	return {
		x,
    	y,
      	...point5common(x,y)
    }
}

const point5bcommon = (x,y) => ({
  	addb(point){
    	return Point5b(x + point.x, y + point.y);
	},
  	subb(point){
		return Point5b(x - point.x, y - point.y);
	}
});

function Point5b(x, y) {
	return {
		...Point5(x,y),
      	...point5bcommon(x,y)
    }
}

var Point6 = class Point6 {
	constructor(x, y){
		this.x = x;
		this.y = y;
    }
}

Point6.prototype.add = function add(point){
	return new Point6(this.x + point.x, this.y + point.y);
}
Point6.prototype.sub = function sub(point){
	return new Point6(this.x - point.x, this.y - point.y);
}

var Point6b = class Point6b extends Point6 {}

Point6b.prototype.addb = function addb(point){
	return new Point6b(this.x + point.x, this.y + point.y);
}
Point6b.prototype.subb = function subb(point){
	return new Point6b(this.x - point.x, this.y - point.y);
}

const basePropertyDescriptor = {
    configurable: true,
    enumerable: false,
    writable: true,
}

var Point7 = class Point7 {
	constructor(x, y){
		this.x = x;
		this.y = y;
    }
}

Object.defineProperties(Point7.prototype, {
	add: { ...basePropertyDescriptor, value: {add(point) {
		return new Point7(this.x + point.x, this.y + point.y);
	}}.add},
	sub: { ...basePropertyDescriptor, value: {sub(point) {
		return new Point7(this.x - point.x, this.y - point.y);
	}}.sub}
});

var Point7b = class Point7b extends Point7 {}

Object.defineProperties(Point7b.prototype, {
	addb: { ...basePropertyDescriptor, value: {addb(point) {
		return new Point7b(this.x + point.x, this.y + point.y);
	}}.addb},
	subb: { ...basePropertyDescriptor, value: {subb(point) {
		return new Point7b(this.x - point.x, this.y - point.y);
	}}.subb}
});

var Point8 = class Point8 {
    static {
        Object.defineProperties(Point8.prototype, {
        	add: { ...basePropertyDescriptor, value: {add(point) {
        		return new Point8(this.x + point.x, this.y + point.y);
        	}}.add},
        	sub: { ...basePropertyDescriptor, value: {sub(point) {
        		return new Point8(this.x - point.x, this.y - point.y);
        	}}.sub}
        });
    }

	constructor(x, y){
		this.x = x;
		this.y = y;
    }
}

var Point8b = class Point8b extends Point8 {
    static {
        Object.defineProperties(Point8b.prototype, {
        	addb: { ...basePropertyDescriptor, value: {addb(point) {
        		return new Point8b(this.x + point.x, this.y + point.y);
        	}}.addb},
        	subb: { ...basePropertyDescriptor, value: {subb(point) {
        		return new Point8b(this.x - point.x, this.y - point.y);
        	}}.subb}
        });
    }
}

Tests:

ES6 Class
var p1 = new Point1(10, 10); var p2 = new Point1(10, -10); var sum = p1.add(p2); var dif = p1.sub(p2);
Function Prototype
var p1 = new Point2(10, 10); var p2 = new Point2(10, -10); var sum = p1.add(p2); var dif = p1.sub(p2);
Object Literal
var p1 = Point3(10, 10); var p2 = Point3(10, -10); var sum = p1.add(p2); var dif = p1.sub(p2);
ES6 Class (inheritance)
var p1 = new Point1b(10, 10); var p2 = new Point1b(10, -10); var sum = p1.add(p2); var dif = p1.sub(p2);
Function Prototype (inheritance)
var p1 = new Point2b(10, 10); var p2 = new Point2b(10, -10); var sum = p1.add(p2); var dif = p1.sub(p2);
Object Literal (inheritance)
var p1 = Point3b(10, 10); var p2 = Point3b(10, -10); var sum = p1.add(p2); var dif = p1.sub(p2);
Inline Object Literal
var p1 = Point4(10, 10); var p2 = Point4(10, -10); var sum = p1.add(p2); var dif = p1.sub(p2);
Inline Object Literal (inheritance)
var p1 = Point4b(10, 10); var p2 = Point4b(10, -10); var sum = p1.add(p2); var dif = p1.sub(p2);
Spread Object Literal
var p1 = Point5(10, 10); var p2 = Point5(10, -10); var sum = p1.add(p2); var dif = p1.sub(p2);
Spread Object Literal (inheritance)
var p1 = Point5b(10, 10); var p2 = Point5b(10, -10); var sum = p1.add(p2); var dif = p1.sub(p2);
Modified ES6 Class
var p1 = new Point6(10, 10); var p2 = new Point6(10, -10); var sum = p1.add(p2); var dif = p1.sub(p2);
Modified ES6 Class (inheritance)
var p1 = new Point6b(10, 10); var p2 = new Point6b(10, -10); var sum = p1.add(p2); var dif = p1.sub(p2);
Modified Properties ES6 Class
var p1 = new Point7(10, 10); var p2 = new Point7(10, -10); var sum = p1.add(p2); var dif = p1.sub(p2);
Modified Properties ES6 Class (inheritance)
var p1 = new Point7b(10, 10); var p2 = new Point7b(10, -10); var sum = p1.add(p2); var dif = p1.sub(p2);
Static Initializer Modified Properties ES6 Class
var p1 = new Point8(10, 10); var p2 = new Point8(10, -10); var sum = p1.add(p2); var dif = p1.sub(p2);
Static Initializer Modified Properties ES6 Class (inheritance)
var p1 = new Point8b(10, 10); var p2 = new Point8b(10, -10); var sum = p1.add(p2); var dif = p1.sub(p2);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
ES6 Class
Function Prototype
Object Literal
ES6 Class (inheritance)
Function Prototype (inheritance)
Object Literal (inheritance)
Inline Object Literal
Inline Object Literal (inheritance)
Spread Object Literal
Spread Object Literal (inheritance)
Modified ES6 Class
Modified ES6 Class (inheritance)
Modified Properties ES6 Class
Modified Properties ES6 Class (inheritance)
Static Initializer Modified Properties ES6 Class
Static Initializer Modified Properties ES6 Class (inheritance)

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Firefox 128 on Linux

View result in a separate tab

Test name	Executions per second
ES6 Class	12228227.0 Ops/sec
Function Prototype	11722101.0 Ops/sec
Object Literal	6893725.5 Ops/sec
ES6 Class (inheritance)	9140907.0 Ops/sec
Function Prototype (inheritance)	10665526.0 Ops/sec
Object Literal (inheritance)	163704.3 Ops/sec
Inline Object Literal	16899312.0 Ops/sec
Inline Object Literal (inheritance)	179269.6 Ops/sec
Spread Object Literal	940938.7 Ops/sec
Spread Object Literal (inheritance)	556689.8 Ops/sec
Modified ES6 Class	12185928.0 Ops/sec
Modified ES6 Class (inheritance)	9391516.0 Ops/sec
Modified Properties ES6 Class	12364719.0 Ops/sec
Modified Properties ES6 Class (inheritance)	9641920.0 Ops/sec
Static Initializer Modified Properties ES6 Class	12930588.0 Ops/sec
Static Initializer Modified Properties ES6 Class (inheritance)	9332398.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Related benchmarks: