コンストラクター

constructor メソッドは、 class で作成されたオブジェクトの生成と初期化のための特殊なメソッドです。

構文

constructor([arguments]) { ... }

解説

コンストラクターを使用すると、インスタンス化されたオブジェクトに対して、他のメソッドを呼び出す前に行う必要のある独自の初期化を提供することができます。

class Person {

  constructor(name) {
    this.name = name;
  }

  introduce() {
    console.log(`Hello, my name is ${this.name}`);
  }

}

const otto = new Person('Otto');

otto.introduce();

独自のコンストラクターを提供しなかった場合は、既定のコンストラクターが提供されます。クラスが基底クラスである場合、既定のコンストラクターは空です。

constructor() {}

クラスが派生クラスの場合、既定のコンストラクターが親コンストラクターを呼び出し、与えられた引数を渡します。

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

それがこのようなコードを動作させることができます。

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;
  }
}

ValidationError クラスは、独自の初期化を行う必要がないため、明示的なコンストラクターは必要ありません。既定のコンストラクターは、与えられた引数から親の Error の初期化を行います。

ただし、独自のコンストラクターを提供し、クラスが親クラスから派生している場合は、 super を使用して親クラスのコンストラクターを明示的に呼び出す必要があります。例えば、以下のようになります。

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;
  }
}

クラスには "constructor" という名前の特別なメソッドが 1 つだけ存在します。クラス内に複数の constructor メソッドが存在すると、 SyntaxError エラーが発生します。

constructor メソッドの使用

このコードスニペットは、classes sample (ライブデモ) から転載しています。

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;
  } 
}

他の例

ここでは、 Square クラスのプロトタイプが変更されていますが、新しいインスタンスが作成されたときには、その基底クラスである Polygon のコンストラクターが呼び出されます。

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

仕様書

仕様書
ECMAScript (ECMA-262)
Constructor Method の定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイルサーバー
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung InternetNode.js
constructorChrome 完全対応 49
完全対応 49
未対応 42 — 49
補足
補足 Strict mode is required.
未対応 42 — 49
無効
無効 From version 42 until version 49 (exclusive): this feature is behind the Experimental JavaScript preference (needs to be set to Enabled). To change preferences in Chrome, visit chrome://flags.
Edge 完全対応 13Firefox 完全対応 45IE 未対応 なしOpera 完全対応 36
完全対応 36
未対応 29 — 36
補足
補足 Strict mode is required.
未対応 29 — 36
無効
無効 From version 29 until version 36 (exclusive): this feature is behind the Experimental JavaScript preference (needs to be set to Enabled).
Safari 完全対応 9WebView Android 完全対応 49
完全対応 49
未対応 42 — 49
補足
補足 Strict mode is required.
Chrome Android 完全対応 49
完全対応 49
未対応 42 — 49
補足
補足 Strict mode is required.
未対応 42 — 49
無効
無効 From version 42 until version 49 (exclusive): this feature is behind the Experimental JavaScript preference (needs to be set to Enabled). To change preferences in Chrome, visit chrome://flags.
Firefox Android 完全対応 45Opera Android 完全対応 36
完全対応 36
未対応 29 — 36
補足
補足 Strict mode is required.
未対応 29 — 36
無効
無効 From version 29 until version 36 (exclusive): this feature is behind the Experimental JavaScript preference (needs to be set to Enabled).
Safari iOS 完全対応 9Samsung Internet Android 完全対応 5.0
完全対応 5.0
未対応 4.0 — 5.0
補足
補足 Strict mode is required.
nodejs 完全対応 6.0.0
完全対応 6.0.0
完全対応 4.0.0
無効
無効 From version 4.0.0: this feature is behind the --use_strict runtime flag.
完全対応 5.0.0
無効
無効 From version 5.0.0: this feature is behind the --harmony runtime flag.

凡例

完全対応  
完全対応
未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報