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

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

目次

継承

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

コード

サンプルのコードです。
16行目は、Color2が3行目のColor1を継承しています。
6行目と18行目のメソッド名(getName1)は同じ名前です。オーバーライドといいます。
→26行目は、18行目のColor2クラスのgetName1メソッドを実行します。
→オーバーライドの機能で処理内容を上書きしています。
27行目は、9行目のColor1のメソッドを実行します。
→Color2は、getName2メソッドを再実装しないで済んでいます。継承の利点です。

<script>

var Color1 = function(){};

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

var Color2 = function(){};

Color2.prototype = new Color1();

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

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

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

プロトタイプチェーン

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

1.Color2のインスタンスでgetName2を探す(25行目)→ない
2.Color2のプロトタイプで探す(18行目)→ない
3.プロトタイプに登録したColor1のインスタンスでgetName2を探す(16行目)→ない
4.Color1のプロトタイプでgetName2探す(5行目)→あり

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

関連の記事

JavaScript プロトタイプのサンプル(prototype)



△上に戻る