Run results for: Comparison of classes vs prototypes vs object literals also including the inheritance

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.

Run details:

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

Browser: Chrome 117

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
ES6 Class	16353829.0 Ops/sec
Function Prototype	7643619.0 Ops/sec
Object Literal	1765667.8 Ops/sec
ES6 Class with private properties	16166979.0 Ops/sec
ES6 class with inheritance	15926383.0 Ops/sec
ES6 class with inheritance and private fields declared	9682011.0 Ops/sec
Function prototype with inheritance	3320733.5 Ops/sec

Script Preparation code:

// 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);

Run results for: Comparison of classes vs prototypes vs object literals also including the inheritance

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.

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