プロトタイプチェーン

（オブジェクト指向）

意味メソッドの検索経路

プロトタイプチェーンとは？

オブジェクトがメソッドやプロパティにアクセスするとき、自身のプロパティを探し、存在しない場合にはプロトタイプの中を検索する。この連鎖的な検索がプロトタイプチェーンです。

プロトタイプチェーンの具体的な使い方

プロトタイプチェーンを使用したメソッド継承例

<button onclick="const subObj = new SubObj(); subObj.sayHello(); subObj.sayGoodbye();">プロトタイプチェーンの使用例</button>
<script>
function Obj() {}
Obj.prototype.sayHello = function() {
  alert('こんにちは！Objからのメッセージです。');
};

function SubObj() {}
SubObj.prototype = Object.create(Obj.prototype);
SubObj.prototype.sayGoodbye = function() {
  alert('さようなら！SubObjからのメッセージです。');
};
</script>

`SubObj`のインスタンスが`Obj`のプロトタイプから`sayHello`メソッドを継承し、プロトタイプチェーンを通じてこのメソッドを呼び出す例です。また、`SubObj`自身のプロトタイプに`sayGoodbye`メソッドを追加しています。ボタンをクリックすると、両方のメソッドが順番に呼び出されます。

複数レベルのプロトタイプチェーンの例

const animal = {
  eat: function() {
    return '食事中...';
  }
};

const dog = Object.create(animal);
dog.bark = function() {
  return 'ワンワン！';
};

const poodle = Object.create(dog);
poodle.curl = function() {
  return '毛をカールさせています。';
};

console.log(poodle.eat());   // animalから継承
console.log(poodle.bark());  // dogから継承
console.log(poodle.curl());  // poodle自身のメソッド

// プロトタイプチェーンの確認
console.log(poodle.__proto__ === dog);           // true
console.log(poodle.__proto__.__proto__ === animal); // true

👇出力結果

食事中...
ワンワン！
毛をカールさせています。
true
true

複数レベルのプロトタイプチェーンを作成し、各レベルのメソッドにアクセスする例です。poodleオブジェクトは、dogとanimalからメソッドを継承しています。また、__proto__を使用してプロトタイプチェーンを確認しています。

プロトタイプチェーンに関するよくある質問

Q. プロトタイプチェーンとは？

A. オブジェクトがプロパティやメソッドを探す際、自身のプロパティを探し、なければプロトタイプを辿って探索を続ける仕組みです。

Q. チェーンの長さに制限はある？

A. 理論上は制限はありませんが、長すぎるチェーンはパフォーマンスに影響を与える可能性があります。通常は短めに保つことが推奨されます。

Q. プロトタイプチェーンの終点は？

A. 最終的にはObject.prototypeに到達し、そこにもないと'undefined'を返します。これがプロトタイプチェーンの終点となります。

プロトタイプチェーンが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、JavaScriptのプロトタイプチェーンやカプセル化、Private、ミックスイン、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。