We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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 の定義
ドラフト  

ブラウザ実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応42 あり45 なし あり あり
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応4242 あり45 あり あり4.0

関連項目

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

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