JavaScriptEasy

What are the differences between JavaScript ES2015 classes and ES5 function constructors?

By FrontendPro Editorial Team Updated 8/8/2026

#JavaScript

Answer

ES2015 introduces a new way of creating classes, which provides a more intuitive and concise way to define and work with objects and inheritance compared to the ES5 function constructor syntax. Here's an example of each:

// ES5 function constructor
function Person(name) {
  this.name = name;
}

// ES2015 Class
class Person {
  constructor(name) {
    this.name = name;
  }
}

For simple constructors, they look pretty similar. The main difference in the constructor comes when using inheritance. If we want to create a Student class that subclasses Person and adds a studentId field, this is what we have to do.

// ES5 inheritance
// Superclass
function Person1(name) {
  this.name = name;
}

// Subclass
function Student1(name, studentId) {
  // Call constructor of superclass to initialize superclass-derived members.
  Person1.call(this, name);

  // Initialize subclass's own members.
  this.studentId = studentId;
}
Student1.prototype = Object.create(Person1.prototype);
Student1.prototype.constructor = Student1;

const student1 = new Student1("John", 1234);
console.log(student1.name, student1.studentId); // "John" 1234

// ES2015 inheritance
// Superclass
class Person2 {
  constructor(name) {
    this.name = name;
  }
}

// Subclass
class Student2 extends Person2 {
  constructor(name, studentId) {
    super(name);
    this.studentId = studentId;
  }
}

const student2 = new Student2("Alice", 5678);
console.log(student2.name, student2.studentId); // "Alice" 5678

It's much more verbose to use inheritance in ES5, and the ES2015 version is easier to understand and remember.

Comparison of ES5 function constructors vs ES2015 classes

Feature	ES5 Function Constructor	ES2015 Class
Syntax	Uses function constructors and prototypes	Uses `class` keyword
Constructor	Function with properties assigned using `this`	`constructor` method inside the class
Method Definition	Defined on the prototype	Defined inside the class body
Static Methods	Added directly to the constructor function	Defined using the `static` keyword
Inheritance	Uses `Object.create()` and manually sets prototype chain	Uses `extends` keyword and `super` function
Readability	Less intuitive and more verbose	More concise and intuitive

JavaScript