MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/a3e7b5301fea

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

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

構文

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

説明

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

クラス内で super を使用する

このコードスニペットは、classes sample (実際のデモ) からとっています。

class Polygon {
  constructor(height, width) {
    this.name = 'Polygon';
    this.height = height;
    this.width = width;
  }
  sayName() {
    console.log('Hi, I am a ', this.name + '.');
  }
}

class Square extends Polygon {
  constructor(length) {
    this.height; // ReferenceError, super needs to be called first!
    
    // 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 reference error.
    this.name = 'Square';
  }

  get area() {
    return this.height * this.width;
  }

  set area(value) {
    this.area = value;
  } 
}

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

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

class Human {
  constructor() {}
  static ping() {
    return 'ping';
  }
}

class Computer extends Human {
  constructor() {}
  static pingpong() {
    return super.ping() + ' pong';
  }
}
Computer.pingpong(); // 'ping pong'

super プロパティ削除によるスロー

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

class Base {
  constructor() {}
  foo() {}
}
class Derived extends Base {
  constructor() {}
  delete() {
    delete super.foo;
  }
}

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();
console.log(x.prop); // 1

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

super は object initializer / literal 記法内でも使用できます。この例では、2 つのオブジェクトがメソッドを定義しています。2 つ目のオブジェクトで、super で 1 つ目のオブジェクトのメソッドを呼び出します。これは、 obj2 のプロトタイプを obj1 に設定するために、Object.setPrototypeOf() の助けを借りて動作します。そのため、superobj1 上で 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 2017 Draft (ECMA-262)
super の定義
ドラフト  

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 42.0 45 (45) ? ? ?
機能 Android Android Webview Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
基本サポート ? 42.0 45.0 (45) ? ? ? 42.0

Gecko 特有の注記

  • ビルトインプロトタイプで super() は動作しません。

関連項目

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

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