JavaScript 継承のサンプル(プロトタイプチェーン)

JavaScriptの継承のサンプルです。
プロトタイプチェーンを使用します。

継承
プロトタイプチェーン

継承

継承とは、あるものから別のものに機能を引き継ぐことです。(jsではオブジェクト)
すでにある機能を重複して持たなくてすみ、差分がある部分のみ追加すれば良くなります。
継承元のことを基底orスーパーor親といい、継承先のことを派生orサブor子といいます。

コード

継承のサンプルです。

<script>

const Color1 = function(){};

Color1.prototype = {
	getName1: function() {
		return "赤";
	},
	getName2: function() {
		return "黄";
	},
};

const Color2 = function(){};

Color2.prototype = new Color1();

Color2.prototype.getName1=function(){
	return "青";
}

const a = new Color1();//
console.log(a.getName1()); //赤

const b = new Color2();//
console.log(b.getName1()); //青
console.log(b.getName2()); //黄
</script>

3行目は、関数リテラルを変数に設定しています。クラスです。
5～12行目は、Color1のプロトタイプです。
14行目は、関数リテラルを変数に設定しています。クラスです。
16行目は、Color1インスタンスを生成し、Color2のプロトタイプに設定しています。
Color1とColor2のつながりが生まれ、Color2はColor1を継承します。
18～20行目は、Color2のプロトタイプです。
22,23行目は、Color1のインスタンスを生成しColor1のメソッドを実行しています。
25行目は、Color2のインスタンスを生成しています。
26行目のgetName1は、6行目と18行目にあり同じ名前です。
どちらが実行されるかというと18行目のgetName1が実行されます。
処理内容が上書きされるのでオーバーライドといいます。
27行目のgetName2は、Color1にある9行目のgetName2が実行されます。
これは機能が継承されているためです。Color2は、getName2メソッドを再実装しないで済んでいます。継承の利点です。

プロトタイプチェーン

上記コードの27行目の実行時は以下の流れが起きています。

１．Color2のインスタンスでgetName2を探す(25行目)→ない
２．Color2のプロトタイプで探す(18行目)→ない
３．プロトタイプに登録したColor1のインスタンスでgetName2を探す(16行目)→ない
４．Color1のプロトタイプでgetName2探す(5行目)→あり

この参照の連鎖をプロトタイプチェーンといいます。

以下はMDNの継承とプロトタイプチェーンのリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain