constructor

BaselineWidely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2016.

Theconstructor method is a special method of aclass for creating and initializing an object instance of that class.

Note:This page introduces theconstructor syntax. For theconstructor property present on all objects, seeObject.prototype.constructor.

Try it

class Polygon {  constructor() {    this.name = "Polygon";  }}const poly1 = new Polygon();console.log(poly1.name);// Expected output: "Polygon"

Syntax

constructor() { /* … */ }constructor(argument0) { /* … */ }constructor(argument0, argument1) { /* … */ }constructor(argument0, argument1, /* …, */ argumentN) { /* … */ }

There are some additional syntax restrictions:

A class method calledconstructor cannot be agetter,setter,async, orgenerator.
A class cannot have more than oneconstructor method.

Description

A constructor enables you to provide any custom initialization that must be done before any other methods can be called on an instantiated object.

class Person {  constructor(name) {    this.name = name;  }  introduce() {    console.log(`Hello, my name is ${this.name}`);  }}const otto = new Person("Otto");otto.introduce(); // Hello, my name is Otto

If you don't provide your own constructor, then a default constructor will be supplied for you.If your class is a base class, the default constructor is empty:

constructor() {}

If your class is a derived class, the default constructor calls the parent constructor, passing along any arguments that were provided:

constructor(...args) {  super(...args);}

Note:The difference between an explicit constructor like the one above and the default constructor is that the latter doesn't actually invokethe array iterator throughargument spreading.

That enables code like this to work:

class ValidationError extends Error {  printCustomerMessage() {    return `Validation failed :-( (details: ${this.message})`;  }}try {  throw new ValidationError("Not a valid phone number");} catch (error) {  if (error instanceof ValidationError) {    console.log(error.name); // This is Error instead of ValidationError!    console.log(error.printCustomerMessage());  } else {    console.log("Unknown error", error);    throw error;  }}

TheValidationError class doesn't need an explicit constructor, because it doesn't need to do any custom initialization.The default constructor then takes care of initializing the parentError from the argument it is given.

However, if you provide your own constructor, and your class derives from some parent class, then you must explicitly call the parent class constructor usingsuper().For example:

class ValidationError extends Error {  constructor(message) {    super(message); // call parent class constructor    this.name = "ValidationError";    this.code = "42";  }  printCustomerMessage() {    return `Validation failed :-( (details: ${this.message}, code: ${this.code})`;  }}try {  throw new ValidationError("Not a valid phone number");} catch (error) {  if (error instanceof ValidationError) {    console.log(error.name); // Now this is ValidationError!    console.log(error.printCustomerMessage());  } else {    console.log("Unknown error", error);    throw error;  }}

Usingnew on a class goes through the following steps:

(If it's a derived class) Theconstructor body before thesuper() call is evaluated. This part should not accessthis because it's not yet initialized.
(If it's a derived class) Thesuper() call is evaluated, which initializes the parent class through the same process.
The current class'sfields are initialized.
Theconstructor body after thesuper() call (or the entire body, if it's a base class) is evaluated.

Within theconstructor body, you can access the object being created throughthis and access the class that is called withnew throughnew.target. Note that methods (includinggetters andsetters) and theprototype chain are already initialized onthis before theconstructor is executed, so you can even access methods of the subclass from the constructor of the superclass. However, if those methods usethis, thethis will not have been fully initialized yet. This means reading public fields of the derived class will result inundefined, while reading private fields will result in aTypeError.

new (class C extends class B {  constructor() {    console.log(this.foo());  }} {  #a = 1;  foo() {    return this.#a; // TypeError: Cannot read private member #a from an object whose class did not declare it    // It's not really because the class didn't declare it,    // but because the private field isn't initialized yet    // when the superclass constructor is running  }})();

Theconstructor method may have a return value. While the base class may return anything from its constructor, the derived class must return an object orundefined, or aTypeError will be thrown.

class ParentClass {  constructor() {    return 1;  }}console.log(new ParentClass()); // ParentClass {}// The return value is ignored because it's not an object// This is consistent with function constructorsclass ChildClass extends ParentClass {  constructor() {    return 1;  }}console.log(new ChildClass()); // TypeError: Derived constructors may only return object or undefined

If the parent class constructor returns an object, that object will be used as thethis value on whichclass fields of the derived class will be defined. This trick is called"return overriding", which allows a derived class's fields (includingprivate ones) to be defined on unrelated objects.

Theconstructor follows normalmethod syntax, soparameter default values,rest parameters, etc. can all be used.

class Person {  constructor(name = "Anonymous") {    this.name = name;  }  introduce() {    console.log(`Hello, my name is ${this.name}`);  }}const person = new Person();person.introduce(); // Hello, my name is Anonymous

The constructor must be a literal name.Computed properties cannot become constructors.

class Foo {  // This is a computed property. It will not be picked up as a constructor.  ["constructor"]() {    console.log("called");    this.a = 1;  }}const foo = new Foo(); // No logconsole.log(foo); // Foo {}foo.constructor(); // Logs "called"console.log(foo); // Foo { a: 1 }

Async methods, generator methods, accessors, and class fields are forbidden from being calledconstructor. Private names cannot be called#constructor. Any member namedconstructor must be a plain method.

Examples

Using the constructor

This code snippet is taken from theclasses sample (live demo).

class Square extends Polygon {  constructor(length) {    // Here, it calls the parent class' constructor with lengths    // provided for the Polygon's width and height    super(length, length);    // NOTE: In derived classes, `super()` must be called before you    // can use `this`. Leaving this out will cause a ReferenceError.    this.name = "Square";  }  get area() {    return this.height * this.width;  }  set area(value) {    this.height = value ** 0.5;    this.width = value ** 0.5;  }}

Calling super in a constructor bound to a different prototype

super() calls the constructor that's the prototype of the current class. If you change the prototype of the current class itself,super() will call the constructor that's the new prototype. Changing the prototype of the current class'sprototype property doesn't affect which constructorsuper() calls.

class Polygon {  constructor() {    this.name = "Polygon";  }}class Rectangle {  constructor() {    this.name = "Rectangle";  }}class Square extends Polygon {  constructor() {    super();  }}// Make Square extend Rectangle (which is a base class) instead of PolygonObject.setPrototypeOf(Square, Rectangle);const newInstance = new Square();// newInstance is still an instance of Polygon, because we didn't// change the prototype of Square.prototype, so the prototype chain// of newInstance is still//   newInstance --> Square.prototype --> Polygon.prototypeconsole.log(newInstance instanceof Polygon); // trueconsole.log(newInstance instanceof Rectangle); // false// However, because super() calls Rectangle as constructor, the name property// of newInstance is initialized with the logic in Rectangleconsole.log(newInstance.name); // Rectangle