JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのsuperキーワードとは？使い方をサンプルコード付きで解説

superキーワードとは

superキーワードは、オブジェクトの親クラス（スーパークラス）が持つ関数やプロパティにアクセスし、呼び出すために使用されます。super.prop や super[expr] といった式は、クラスおよびオブジェクトリテラル内の任意のメソッド定義の中で利用できます。

このキーワードは、extendsキーワードを使って別のクラスを継承した「派生クラス（サブクラス）」の中で活用されるのが一般的です。

基本構文

super(arguments);

実行例

以下の例では、「Person」というクラスの特性を、「Student」という別のクラスへ継承しています。両方のクラスにはそれぞれ固有のプロパティを持たせています。

ここでsuperキーワードは、親クラス（Person）のプロパティやメソッドにアクセスするために使われており、一方でthisキーワードは、派生クラス（Student）自身のプロパティにアクセスするために使われています。この使い分けが、クラス継承における重要なポイントです。

<html>
<body>
<script>
    class Person {
        constructor(name, grade) {
            this.name = name;
            this.grade = grade;
        }
        goal() {
            return `${this.name} wants to become a crickter!`;
        }
        interest() {
            return `${this.name} interested in cricket !`;
        }
    }
    class Student extends Person {
        constructor(name, grade) {
            super(name, grade);
        }
        need() {
            return `${this.name} needs a cricket kit`;
        }
        career() {
            return `${super.interest()}
            ${super.goal()}
            ${this.need()}`;
        }
    }
    const student = new Student('Rishab pant', '7');
    document.write(student.career());
</script>
</body>
</html>

実行結果

Rishab pant interested in cricket !
Rishab pant wants to become a crickter!
Rishab pant needs a cricket kit

ポイントまとめ

  • 派生クラスのconstructor内で super() を呼び出すことで、親クラスのコンストラクタを実行できます。なお、this を使う前に必ず super() を呼び出す必要があります。
  • super.methodName() の形式で、親クラスのメソッドを呼び出せます。
  • 親クラスの機能を再利用しつつ、派生クラス独自の機能を追加できるため、コードの重複を減らし保守性を高められます。
  1. JavaScriptのthisキーワードとは？参照先のオブジェクトをわかりやすく解説

    JavaScriptのthisキーワードは、そのキーワードが属しているオブジェクトを参照します。大きな特徴として、使用される文脈によって参照先が変化するという点があり、これがthisの挙動を理解するうえで重要なポイントとなります。 thisが参照するオブジェクトの一覧 単独で使用した場合、または通常の関数内： グローバルオブジェクト（ブラウザ環境では window オブジェクト）を参照します。 オブジェクトのメソッド内： そのメソッドを所有するオブジェクト自身を参照します。 イベントリスナー内： イベントを受け取ったHTML要素を参照します。 サンプルコード 以下は、JavaScriptの

  2. JavaScriptのyield*式とは?ジェネレーターの委譲方法をサンプルコードで解説

    yield* 式は、別のジェネレーター関数やイテラブル(反復可能)オブジェクトを参照し、その値の生成処理を委譲するために使用される構文です。 通常の yield が単一の値を返すのに対し、yield* は指定したジェネレーターや配列などのイテラブルが持つすべての値を、あたかもその場所に直接記述したかのように順番に取り出します。これにより、複数のジェネレーターを連結したり、再帰的なデータ構造を簡潔に走査したりすることが可能になります。 yield*式の基本的な仕組み yield* の後にジェネレーターオブジェクトやイテラブルを指定すると、その要素がすべて順に生成されます。委譲先のジェネレーター