【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
プロパティにアクセスしています。
実行結果から各プロパティ、メソッドが正常に動作したことが分かります。
このようにクラスの継承は別クラスを引き継ぎ、フィールドやメソッドを追加することで拡張したクラスを定義することが可能です。