JavaScript クラスの継承のサンプル

JavaScriptのクラスの継承のサンプルです。

クラスの継承の概念
継承
基底クラスのメソッドを実行する(super)

クラスの継承の概念

クラスを継承すると、継承先のクラスは継承元のクラスの機能を引き継ぎます。
継承先のクラスは、差分の機能を追加するだけでよくなります。
継承元のクラスのことを「基底クラス」or 「親クラス」or 「スーパークラス」といいます。
継承先のクラスのことを「派生クラス」 or「子クラス」 or「サブクラス」といいます。
クラスは、ECMAScript 2015 (ES 6)で追加されました。
JavaScriptのクラスは、JavaScript に既にあるプロトタイプベース継承のシンタックスシュガー(シンプルな書き方)です。
以下はMDNのクラスのリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Classes

継承

class クラス名 extends 継承元のクラス名{
}

継承するクラスは、「extends」と継承元のクラスを記述します。

コード

クラスの継承のサンプルです。

<script>

class Color1{
	getName1(){
		return "赤";
	}
}
class Color2 extends Color1{
	getName2(){
		return "青";
	}
}

let a = new Color2();

console.log(a.getName1()); //赤
console.log(a.getName2()); //青
</script>

3-7行目は、基底クラスです。
8-12行目は、派生クラスです。
8行目は、Color2クラスがextendsを使用して3行目のColor1クラスを継承しています。

14行目は、8行目のColor2のインスタンスを生成しています。
16行目は、4行目の基底クラスのメソッドを実行します。
→Color2クラスは、基底クラスのメソッドを再実装しないで済んでいます。継承の利点です。

基底クラスのメソッドを実行する(super)

基底クラスのメソッドを実行するサンプルです。 superを使用します。

<script>

class Color1{
	getName1(){
		return "赤";
	}
}
class Color2 extends Color1{
	getName2(){
		const a = super.getName1();
		return a + "青";
	}
}

let a = new Color2();

console.log(a.getName2()); //赤青
</script>

10行目は、superを使用して3行目の基底クラスのメソッドを実行しています。