The constructor
method is a special method of a class
for creating and initializing an object of that class.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Syntax
constructor([arguments]) { ... }
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();
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);
}
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;
}
}
The ValidationError
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 parent Error
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 using super
. 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;
}
}
There can be only one special method with the name "constructor
" in a class. Having more than one occurrence of a constructor
method in a class will throw a SyntaxError
error.
Examples
Using the constructor
method
This code snippet is taken from the classes 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;
}
}
Another example
Here the prototype of Square
class is changed—but the constructor of its base class Polygon
' is still called when a new instance of a square is created.
class Polygon {
constructor() {
this.name = "Polygon";
}
}
class Square extends Polygon {
constructor() {
super();
}
}
class Rectangle {}
Object.setPrototypeOf(Square.prototype, Rectangle.prototype);
console.log(Object.getPrototypeOf(Square.prototype) === Polygon.prototype); //false
console.log(Object.getPrototypeOf(Square.prototype) === Rectangle.prototype); //true
let newInstance = new Square();
console.log(newInstance.name); //Polygon
Specifications
Specification |
---|
ECMAScript (ECMA-262)The definition of 'Constructor Method' in that specification. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | Server | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
constructor
|
Chrome Full support 49 Full support 49 No support 42 — 49 Notes' Strict mode is required. No support 42 — 49 Disabled' From version 42 until version 49 (exclusive): this feature is behind the |
Edge
Full support 13 |
Firefox
Full support 45 |
IE
No support No |
Opera Full support 36 Full support 36 No support 29 — 36 Notes' Strict mode is required. No support 29 — 36 Disabled' From version 29 until version 36 (exclusive): this feature is behind the |
Safari
Full support 9 |
WebView Android Full support 49 Full support 49 No support 42 — 49 Notes' Strict mode is required. |
Chrome Android Full support 49 Full support 49 No support 42 — 49 Notes' Strict mode is required. No support 42 — 49 Disabled' From version 42 until version 49 (exclusive): this feature is behind the |
Firefox Android
Full support 45 |
Opera Android Full support 36 Full support 36 No support 29 — 36 Notes' Strict mode is required. No support 29 — 36 Disabled' From version 29 until version 36 (exclusive): this feature is behind the |
Safari iOS
Full support 9 |
Samsung Internet Android Full support 5.0 Full support 5.0 No support 4.0 — 5.0 Notes' Strict mode is required. |
nodejs Full support 6.0.0 Full support 6.0.0 Full support 4.0.0 Disabled' From version 4.0.0: this feature is behind the Disabled' From version 5.0.0: this feature is behind the |
Legend
- Full support
- Full support
- No support
- No support
- See implementation notes.'
- See implementation notes.
- User must explicitly enable this feature.'
- User must explicitly enable this feature.
See also
constructor by Mozilla Contributors is licensed under CC-BY-SA 2.5.