super キーワードは、オブジェクトの親の関数を呼び出すために使用できます。

super.prop および super[expr] 式は、classオブジェクトリテラル の両方におけるどのようなメソッド定義でも有効です。

構文

super([arguments]); // 親コンストラクタを呼び出す。
super.functionOnParent([arguments]);

説明

コンストラクタ内で使用する場合、super キーワードを単独で置き、this キーワードが使われる前に使用しなくてはなりません。このキーワードは、親オブジェクトの関数を呼び出すためにも使用できます。

クラス内で super を使用する

このコードスニペットは、classes sample (実際のデモ) からとっています。super() を利用することで、Rectangle と Square のコンストラクタに共通する処理を重複して記述しないようにしています。

class Rectangle {
  constructor(height, width) {
    this.name = 'Rectangle';
    this.height = height;
    this.width = width;
  }
  sayName() {
    console.log('Hi, I am a ', this.name + '.');
  }
  get area() {
    return this.height * this.width;
  }
  set area(value) {
    this.height = this.width = Math.sqrt(value);
  }
}

class Square extends Rectangle {
  constructor(length) {
    this.height; // ReferenceError になります。super を先にコールしなければなりません!
    
    // lengthの値で親クラスのconstructorを呼びます。
    // Rectangleのwidthとheightになります。
    super(length, length);
    
    // Note: 'this' を使う前に super() をコールしなければなりません。
    // でないと reference error になります。
    this.name = 'Square';
  }
}

静的なメソッドでの super の呼び出し

static メソッドでも super を呼び出すことができます。

class Rectangle{
  constructor() {}
  static logNbSides() {
    return 'I have 4 sides';
  }
}

class Square extends Rectangle {
  constructor() {}
  static logDescription() {
    return super.logNbSides() + ' which are all equal';
  }
}
Square.logDescription(); // 'I have 4 sides which are all equal'

super でのプロパティ削除はエラー

親クラスのプロパティを削除するために、delete 演算子super.propsuper[expr] を使うことはできません。ReferenceError がスローされます。

class Base {
  constructor() {}
  foo() {}
}
class Derived extends Base {
  constructor() {}
  delete() {
    delete super.foo; // this is bad
  }
}

new Derived().delete(); // ReferenceError: invalid delete involving 'super'. 

Super.prop は書き込み不可プロパティを上書きできない

Object.defineProperty などで書き込み不可プロパティを定義した場合、 super はプロパティの値を上書きできません。

class X {
  constructor() {
    Object.defineProperty(this, 'prop', {
      configurable: true,
      writable: false, 
      value: 1
    });
  } 
  f() { 
    super.prop = 2;
  }
}

var x = new X();
x.f(); // TypeError: "prop" is read-only
console.log(x.prop); // 1

オブジェクトリテラル内で super.prop を使用する

super は object initializer / literal 記法内でも使用できます。この例では、二つのオブジェクトがメソッドを定義しています。二つ目のオブジェクトの中で、super を使って一つ目のオブジェクトのメソッドを呼び出そうとしています。この例を動かすために、Object.setPrototypeOf()を使って obj2 のプロトタイプに obj1 を設定しています。そうすることで、super.method1obj1 上の method1 に見つけることができます。

var obj1 = {
  method1() {
    console.log('method 1');
  }
}

var obj2 = {
  method2() {
   super.method1();
  }
}

Object.setPrototypeOf(obj2, obj1);
obj2.method2(); // logs "method 1"

仕様

仕様 状況 コメント
ECMAScript 2015 (6th Edition, ECMA-262)
super の定義
標準 初期定義。
ECMAScript Latest Draft (ECMA-262)
super の定義
ドラフト  

ブラウザ実装状況

Update compatibility data on GitHub
デスクトップモバイルサーバー
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung InternetNode.js
基本対応Chrome 完全対応 42Edge 完全対応 ありFirefox 完全対応 45IE 未対応 なしOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 42Chrome Android 完全対応 42Edge Mobile 完全対応 ありFirefox Android 完全対応 45Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 4.0nodejs 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応

関連項目

ドキュメントのタグと貢献者

このページの貢献者: woodmix, YuichiNukiyama, Marsf
最終更新者: woodmix,