Constructor Functions vs ES6 Classes in JavaScript

Constructor Functions vs ES6 Classes

Constructor Function

function Person(name) {
  this.name = name;
}
Person.prototype.greet = function () { return `Hello, ${this.name}`; };

function Student(name, grade) {
  Person.call(this, name);
  this.grade = grade;
}
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

ES6 Class

class Person {
  constructor(name) { this.name = name; }
  greet() { return `Hello, ${this.name}`; }
}

class Student extends Person {
  constructor(name, grade) { super(name); this.grade = grade; }
}

Key Differences

• Syntax: classes are cleaner and more readable.
• Inheritance: extends and super vs manual Object.create and Person.call.
• new requirement: classes throw without new; constructors don't.
• Hoisting: classes are not hoisted; constructors are (function declarations).
• Strict mode: classes are always strict; constructors are not by default.

Under the Hood

ES6 classes are syntactic sugar over the prototype system. class Person { greet() {} } puts greet on Person.prototype. extends sets up the prototype chain. It is the same mechanism.

The Takeaway

ES6 classes are syntactic sugar over constructor functions and prototypes. Classes are cleaner, enforce new, and are always strict. Constructor functions are the old way with manual prototype chain setup. Use classes in modern code.