JavaScriptのプロトタイプチェインを図で理解する

javascript

javascriptにおけるプロトタイプチェインとその成り立ちを図にしたら自分の理解の助けになるのではと思い、cacooでトライしてみます。

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

ECMA-262によると以下。

オブジェクトのプロパティへが参照される場合、その参照は、プロトタイプチェーン中でその名前のプロパティを持つ最初のオブジェクトのプロパティへの参照である。言いかえれば、まず直接指定されたオブジェクトが、そのプロパティの有無を検査される; そのオブジェクトが指定されたプロパティを持つ場合、それが参照するプロパティである; そのオブジェクトが指定のプロパティを持たない場合、そのオブジェクトのプロトタイプが次に検査される; 以下同様に続く。
Under Translation of ECMA-262 3rd Edition 4 概要 (Overview)

ざっくりいうとプロパティを参照したときに、「そのオブジェクトのプロトタイプ」を辿っていく仕組み、といったところでしょうか。

ひとつのブロックそれぞれがオブジェクトです。
鎖状の矢印で、一連のプロトタイプチェーンを表現してます。オブジェクトから生えた矢印の差すオブジェクトが、「そのオブジェクトのプロトタイプ」です。
つまりこの図は

  • 青オブジェクトのプロトタイプは　赤オブジェクト
  • 赤オブジェクトのプロトタイプは　黄オブジェクト
  • 黄オブジェクトのプロトタイプは　白オブジェクト

ということを表現しています。
青オブジェクトに対してhogeプロパティを参照すると、まず直接指定されたオブジェクト（青）が、hogeプロパティの有無を検査される。青はhogeを持たないので、そのオブジェクトのプロトタイプ（赤）が次に検査される。赤もhogeプロパティを持たないので、赤オブジェクトのプロトタイプ（黄）が次に検査される。黄はhogeプロパティを持つので、その値が参照される。
さて「そのオブジェクトのプロトタイプ」とありますが、これはなんのことでしょうか。

検査される「オブジェクトのプロトタイプ」とはなにか

ECMA-262では下記のように説明されています。

Every object created by a constructor has an implicit reference (called the object’s prototype) to the value of its constructor’s “prototype” property.
Standard ECMA-262 ECMAScript Language Specification 5th edition (December 2009)

図にするとこうなります。

  • コンストラクタ（ピンク）の"prototype"プロパティの値は、黄オブジェクト
  • 赤オブジェクトは、コンストラクタ(ピンク)によって生成されたオブジェクト
  • 赤オブジェクトは、コンストラクタの"prototype"プロパティの値（＝黄オブジェクト）への暗黙的な参照を持つ

ここからさらにコンストラクタとは？というのを説明しようと試みたのですが、用語の整理ができず挫折しました。。。

うまくまとめられれば後日続きをアップしたいと思います

あわせて読みたい

駄文 - JavaScript と「クラス」と「コンストラクタ」と「プロトタイプ」って言葉の定義が難しいよなあ - IT戦記
JavaScriptのnewって本当にいらない子？ - あと味