MeasureThat.net

 Comparison of classes vs prototypes vs object literals also including the inheritance (version: 0)

Test the speed and memory usage using different techniques for constructing class objects. It tests ES6 classes, ES6 classes with private objects, Function Prototype and Object literal. For ES6 classes (with and without private objects) and Function Prototype it also tests inheritance.

Comparing performance of: ES6 Class vs Function Prototype vs Object Literal vs ES6 Class with private properties vs ES6 class with inheritance vs ES6 class with inheritance and private fields declared vs Function prototype with inheritance

Created: one year ago by: Guest
Jump to the latest result
Script Preparation code:
​x
 
// Point1: ES6 class
​
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
​
  getX() {
    return this.x;
  }
​
  getY() {
    return this.y;
  }
​
  add(point) {
    return new Point(this.getX() + point.x, this.y + point.y);
  }
​
  sub(point) {
    return new Point(this.x - point.x, this.y - point.y);
  }
}
var Point1 = Point;
​
// Point1Private: ES6 class with private fields declared
​
class PointVPrivate {
  #x;
  #y;
  constructor(x, y) {
    this.#x = x;
    this.#y = y;
  }
​
  add(point) {
    return new PointVPrivate(this.#x + point.#x, this.#y + point.#y);
  }
​
  sub(point) {
    return new PointVPrivate(this.#x - point.#x, this.#y - point.#y);
  }
}
​
var Point1Private = PointVPrivate;
​
// Point2: Prototypal class
​
function Point2(x, y) {
  this.x = x;
  this.y = y;
}
Point2.prototype.add = function(point) {
  return new Point2(this.x + point.x, this.y + point.y);
}
​
Point2.prototype.sub = function(point) {
  return new Point2(this.x - point.x, this.y - point.y);
}
​
// Point3: Object literal
​
function Point3(x, y) {
  return {
    x,
    y,
    add: (point) => Point3(this.x + point.x, this.y + point.y),
    sub: (point) => Point3(this.x - point.x, this.y - point.y)
  }
}
​
// Point10: ES6 class with inheritance
​
class AbstractPoint10 {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
​
  getX() {
    return this.x;
  }
​
  getY() {
    return this.y;
  }
}
​
class Point10Class extends AbstractPoint10 {
    constructor(x, y) {
      super(x, y);
    }
​
    add(point) {
      return new Point10Class(this.getX() + point.getX(), this.getY() + point.getY());
    }
​
    sub(point) {
      return new Point10Class(this.getX() - point.getX(), this.getY() - point.getY());
    }
}
​
var Point10 = Point10Class;
​
// Point10Private: ES6 class with inheritance and private fields declared
​
class AbstractPoint10Private {
  #x;
  #y;
  constructor(x, y) {
    this.#x = x;
    this.#y = y;
  }
​
  getX() {
    return this.#x;
  }
​
  getY() {
    return this.#y;
  }
}
​
class Point10PrivateClass extends AbstractPoint10Private {
  constructor(x, y) {
    super(x, y);
  }
​
  add(point) {
    return new Point10PrivateClass(this.getX() + point.getX(), this.getY() + point.getY());
  }
​
  sub(point) {
    return new Point10PrivateClass(this.getX() - point.getX(), this.getY() - point.getY());
  }
}
​
var Point10Private = Point10PrivateClass;
​
// Point20: Prototypal class with inheritance
​
function AbstractPoint20(x, y) {
  this.x = x;
  this.y = y;
}
​
AbstractPoint20.prototype.getX = function() {
  return this.x;
}
​
AbstractPoint20.prototype.getY = function() {
  return this.y;
}
​
function Point20(x, y) {
  AbstractPoint20.call(this, x, y);
}
​
Object.setPrototypeOf(Point20.prototype, AbstractPoint20.prototype);
​
Point20.prototype.add = function(point) {
    return new Point20(this.getX() + point.getY(), this.getX() + point.getY());
}
​
Point20.prototype.sub = function(point) {
    return new Point20(this.getX() - point.getY(), this.getX() - point.getY());
}
​
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 with private properties

     
    var p1 = new Point1Private(10, 10);
    var p2 = new Point1Private(10, -10);
    var sum = p1.add(p2);
    var dif = p1.sub(p2);

  • ES6 class with inheritance

     
    var p1 = new Point10(10, 10);
    var p2 = new Point10(10, -10);
    var sum = p1.add(p2);
    var dif = p1.sub(p2);

  • ES6 class with inheritance and private fields declared

     
    var p1 = new Point10Private(10, 10);
    var p2 = new Point10Private(10, -10);
    var sum = p1.add(p2);
    var dif = p1.sub(p2);

  • Function prototype with inheritance

     
    var p1 = new Point20(10, 10);
    var p2 = new Point20(10, -10);
    var sum = p1.add(p2);
    var dif = p1.sub(p2);
Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

  • Test case name Result
    ES6 Class
    Function Prototype
    Object Literal
    ES6 Class with private properties
    ES6 class with inheritance
    ES6 class with inheritance and private fields declared
    Function prototype with inheritance

    Fastest: N/A

    Slowest: N/A

Latest run results:
Run details: (Test run date: 25 days ago)
Mozilla/5.0 (X11; Linux x86_64; rv:128.0) Gecko/20100101 Firefox/128.0
Firefox 128 on Linux
View result in a separate tab
Test name Executions per second
ES6 Class 12517496.0 Ops/sec
Function Prototype 11917467.0 Ops/sec
Object Literal 292879.5 Ops/sec
ES6 Class with private properties 1153396.6 Ops/sec
ES6 class with inheritance 10541821.0 Ops/sec
ES6 class with inheritance and private fields declared 1144289.5 Ops/sec
Function prototype with inheritance 10432523.0 Ops/sec
LLMs can make mistakes. Check important info.
Related benchmarks: