【JavaScript】super - スーパークラスのメソッド呼び出し

JavaScriptのsuperキーワードを解説します。

検証環境

JavaScript -

macOS

14.1

super

superキーワードは“スーパークラスを表すキーワード”です。

クラス内で使用し、スーパークラスのメソッド等へのアクセスを実現します。

また、オーバーライドしたメソッドでもsuperキーワードを使うことで、スーパークラスのメソッドを呼び出すことが可能です。

コンストラクタ

コンストラクタはメソッド名が決まっているため、定義するとスーパークラスのコンストラクタを必ずオーバーライドします。

コンストラクタをオーバーライドした場合、JavaScriptではスーパークラスのコンストラクタの呼び出しが必須になります。

基本構文

class サブクラス名 extends スーパークラス名 {
    constructor( 仮引数１, 仮引数２ ... ) {
        super( 実引数１, 実引数２ ... );
        // 初期化...
    }
}

super()がスーパークラスのコンストラクタ呼び出しです。

サンプル

sample.js

class Person {
    name;
    
    constructor( name ) {
        this.name = name;
    }
    
    greeting() {
        console.log("Hello");
        console.log("My name is " + this.name);
    }
}

class Teacher extends Person {
    subject;
    
    constructor( name, subject ) {
        ___ih_hl_start
        super(name);
        ___ih_hl_end
        this.subject = subject;
    }
}

let t = new Teacher("TANAKA", "Programming");

t.greeting();

console.log(t.subject);

Console

Hello
My name is TANAKA
Programming

１８行目がスーパークラスのコンストラクタの呼び出しです。

実行結果でnameプロパティの値を設定できていることが確認でき、正常に実行したことが分かります。

メソッド

サブクラスからスーパークラスのメソッドを呼び出すことが可能です。

一般的にオーバーライドで処理を引き継ぎたい場合に使用します。

基本構文

super.メソッド名( 実引数１, 実引数２ ... )

サンプル

上記コンストラクタのサンプルにgreetingメソッドのオーバーライドを追加します。

sample.js

class Person {
    name;
    
    constructor( name ) {
        this.name = name;
    }
    
    greeting() {
        console.log("Hello");
        console.log("My name is " + this.name);
    }
}

class Teacher extends Person {
    subject;
    
    constructor( name, subject ) {
        super(name);
        this.subject = subject;
    }
    
    ___ih_diff_start
+    greeting() {
+        super.greeting();
+        console.log("Subject : " + this.subject);
+    }
    ___ih_diff_end
}

let t = new Teacher("TANAKA", "Programming");

t.greeting();

___ih_diff_start
-console.log(t.subject);
___ih_diff_end

Console

Hello
My name is TANAKA
Subject : Programming

２３行目のsuper.greeting()がスーパークラスのメソッド呼び出しです。

実行結果からスーパークラスのgreetingメソッドの処理が実行されたことが確認できます。