クラスのsuper

(クラス)
(式と演算子)
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/super

クラスのsuperとは親クラスを指す。
クラスはclassキーワードを使って作成する。クラスの定義にはコンストラクタ(初期化メソッド)やメソッド、メンバ変数などを記述できる。

class クラス名 {
  // クラスの定義
}

あるクラスを継承した子クラスを作成するには、extendsキーワードを使用する。

class クラス名 extends 親クラス名 {
  // クラスの定義
}

子クラスから親クラスのメソッドを呼び出す場合、superキーワードを使用する。以下の例は子クラスのコンストラクタから、親クラスのコンストラクタを呼び出す。コンストラクタを呼び出す場合は単にsuperと記述する。

constructor(name, age, hobby) {
  // 親クラスのコンストラクタを呼び出す
  super(name, age);
}

親クラスのメソッドを呼び出す場合はメソッド名を指定する。以下は、親クラスのhelloメソッドを呼び出す。

super.hello();

以下の例では、2つのクラスを作成している。HumanクラスはAnimalクラスを継承し、コンストラクタとhelloメソッドの中でsuperを使って親クラスのメソッドを呼び出している。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>sample1</title>
  <script type="text/javascript">
    // Animal クラスの定義
    class Animal {
      constructor(name, age) {
        this.name = name;
        this.age = age;
      }
      hello() {
        console.log("私の名前は" + this.name + "です。歳は" + this.age + "歳です。");
      }
    }
    // Animal クラスを継承した Human クラスを定義
    class Human extends Animal {
      constructor(name, age, hobby) {
        // 親クラスのコンストラクタを呼び出す
        super(name, age);
        this.hobby = hobby;
      }
      hello() {
        // 親クラスのメソッドを呼び出す
        super.hello();
        console.log("さらに私の趣味は" + this.hobby + "です。");
      }
    }
    // Animalクラスのインスタンスを作成し、メソッドを実行
    let cangol = new Animal("カンガルー", 30);
    cangol.hello();
    // Humanクラスのインスタンスを作成し、メソッドを実行
    let taro = new Human("鈴木一郎", 45, "ベースボール");
    taro.hello();
  </script>
</head>
<body></body>
</html>
>> "私の名前はカンガルーです。歳は30歳です。"
>> "私の名前は鈴木一郎です。歳は45歳です。"
>> "さらに私の趣味はベースボールです。"
inserted by FC2 system