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

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

目次

クラスの継承のイメージ

  • クラスがクラスを継承すると、継承先のクラスは継承元のクラスの機能を引き継ぎます。
    継承先のクラスは、差分の機能を追加するだけでよくなります。
  • 継承元のクラスのことを「基底クラス 」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行目の基底クラスのメソッドを実行しています。

関連の記事

JavaScript クラスのサンプル
JavaScript オブジェクトを作成するサンプル
JavaScript prototypeでメソッドを追加するサンプル
JavaScript 継承のサンプル(プロトタイプチェーン)

△上に戻る