class vs function constructor
By FrontendPro Editorial Team Updated 9/26/2026
Answer
class is syntax over the same prototype machinery, not a new object model — but it closes several gaps that made constructor functions error-prone.
// ES5
function Person(name) { this.name = name; }
Person.prototype.greet = function () { return `Hi ${this.name}`; };
// ES2015
class Person {
constructor(name) { this.name = name; }
greet() { return `Hi ${this.name}`; }
}
Both produce objects whose prototype chain leads to the same place. typeof Person is "function" in both cases.
What actually differs
| Function constructor | class | |
|---|---|---|
Called without new | Runs, this undefined, fails quietly | Throws TypeError |
| Hoisting | Fully hoisted, callable above | In the temporal dead zone |
| Strict mode | Inherits the surrounding mode | Always strict |
| Methods | Enumerable — appear in for...in | Non-enumerable |
| Inheritance | Manual Object.setPrototypeOf plus Parent.call(this) | extends and super |
| Private state | Convention only (_name) | Real #fields |
| Static members | Assigned onto the function | static keyword |
The first row is the one that matters day to day. Forgetting new on an ES5 constructor silently produces undefined and writes onto the global object in sloppy mode; a class refuses immediately.
Inheritance is the biggest simplification
// ES5 — three separate steps, easy to get wrong
function Dog(name) { Person.call(this, name); }
Object.setPrototypeOf(Dog.prototype, Person.prototype);
Object.setPrototypeOf(Dog, Person); // for static members
// ES2015
class Dog extends Person {}
class also makes extending built-ins such as Error and Array work correctly, which was unreliable in ES5.
Which to use
Classes, for anything new. Constructor functions remain worth understanding for reading older code and for interviews, since the questions about new and the prototype chain are really questions about what class is doing underneath.
