【JavaScript】クラスの継承(extends) - 別クラスの定義を引き継ぐクラス(スーパークラス・サブクラス)

【JavaScript】クラスの継承(extends) - 別クラスの定義を引き継ぐクラス(スーパークラス・サブクラス)

JavaScriptの『クラスの継承』について解説します。

検証環境

クラスの継承

クラスの継承は“クラスが別クラスの定義を引き継ぐこと”です。

スーパークラス

スーパークラスは“継承元のクラス”のことです。

別名で親クラスとも呼びます。

サブクラス

サブクラスは“継承先のクラス”のことです。

別名で子クラスとも呼びます。

基本構文

サブクラス(継承先のクラス)の定義でextendsキーワードを使ってスーパークラスを指定します。

class サブクラス名 extends スーパークラス名 {
    // 定義...
}

サンプル

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

___ih_hl_start
class Teacher extends Person {
___ih_hl_end
    
}

let t = new Teacher("TANAKA");

t.greeting();
Hello
My name is TANAKA

16行目のextends Personがクラスの継承です。

TeacherクラスはextendsキーワードによってPersonクラスを継承しています。

Teacherクラスはプロパティやメソッドの定義はありませんが、スーパークラスであるPersonクラスの定義を引き継ぐため、nameプロパティやgreetingメソッドを扱えます。

実行結果からもコンストラクタやメソッド、プロパティが正常に動作したことが確認できます。

クラスの拡張

サブクラスにプロパティやメソッド等の定義を追加し、拡張することができます。

例えば上記サンプルのTeacherクラスを拡張した例は次のようになります。

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

class Teacher extends Person {
    
    ___ih_diff_start
+    subject;
    ___ih_diff_end
    
    ___ih_diff_start
+    lesson() {
+        console.log(this.subject + ' : ' + this.name);
+    }
    ___ih_diff_end
    
}

let t = new Teacher("TANAKA");

___ih_diff_start
+t.subject = "Programming";
___ih_diff_end

___ih_diff_start
-t.greeting();
+t.lesson();
___ih_diff_end
Name : tanaka
Lesson : Programming

Teacherクラスにsubjectプロパティ(18行目)とlessonメソッド(20〜22行目)を追加しました。

lessonメソッドではスーパークラスのnameプロパティにアクセスしています。

実行結果から各プロパティ、メソッドが正常に動作したことが分かります。

このようにクラスの継承は別クラスを引き継ぎ、フィールドやメソッドを追加することで拡張したクラスを定義することが可能です。