Benchmark: ES6 Class vs Prototype vs Object Literal vs Object & Functions 2

Tests:

ES6 Class
class Point { constructor(x, y){ this.x = x; this.y = y; } add(point){ return new Point(this.x + point.x, this.y + point.y); } sub(point){ return new Point(this.x - point.x, this.y - point.y); } } var p1 = new Point(10, 10); var p2 = new Point(10, -10); var sum = p1.add(p2); var dif = p1.sub(p2);
Function Prototype
function Point(x, y){ this.x = x; this.y = y; } Point.prototype.add = function(point){ return new Point(this.x + point.x, this.y + point.y); } Point.prototype.sub = function(point){ return new Point(this.x - point.x, this.y - point.y); } var p1 = new Point(10, 10); var p2 = new Point(10, -10); var sum = p1.add(p2); var dif = p1.sub(p2);
Object Literal
function Point(x, y){ return { x, y, add: (point)=>Point(this.x + point.x, this.y + point.y), sub: (point)=>Point(this.x - point.x, this.y - point.y) } } var p1 = Point(10, 10); var p2 = Point(10, -10); var sum = p1.add(p2); var dif = p1.sub(p2);
Object & Functions
const point = (x, y) => ({ x, y }); const add = (a, b) => ({ x: a.x + b.x, y: a.y + b.y }); const sub = (a, b) => ({ x: a.x - b.x, y: a.y - b.y }); var p1 = point(10, 10); var p2 = point(10, -10); var sum = add(p1, p2); var dif = sub(p1, p2);

Rendered benchmark preparation results:

Previous results

ⓘ Get performance results from real users on your website with Request Metrics.

Latest run results:

Run details: (Test run date: 7 months ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36

Browser/OS: Chrome 118 on Linux

ES6 Class vs Prototype vs Object Literal vs Object & Functions 2 (version: 0)