JavaScriptのリファレンスといえばMDNですよね。
JavaScriptで調べものをする際に、真っ先に見る方も多いでしょう。

そんなMDNですが読めていますか？

例えばArrayのページを見てみましょう。

さらっと書かれているprototype

JavaScriptを理解するにはプロトタイプチェーンを知る必要がある

本記事の目的

• プロトタイプチェーンを理解する
• MDNをより読めるようにする
• JavaScriptのObjectやArrayなどの基本型の構造を理解する

確認環境や記述について

• Chrome 52のコンソールで動作確認
• ES5で記述
• 説明のしやすさを重視、プロトタイプをあらわすのに__proto__を使って記述

まずはオブジェクトについてみていく

シンプルなオブジェクトを作る

var obj = {name: "taro"};

var obj = new Object();
obj.name = "taro";

上記2つの同じオブジェクトを作っています。
※{}はnew Object()の糖衣構文

console.logで中身を出力してみる

var obj = {name: "taro"};
console.log(obj);

Object {name: "taro"}というのが出てきました。

Objectを展開

__proto__という未知のプロパティが出てきます。
これはオブジェクトを作ると裏で作られるプロパティです。

__proto__のObjectを展開

プロパティがたくさん設定されているオブジェクトの様です。

ここまでの図解

謎のオブジェクトの正体とは

MDNで検索

出てきたFunction名で検索をかけるとObjectプロトタイプオブジェクトに含まれるメソッドと一致します。

謎のオブジェクトの正体はObject.prototype

obj.__proto__ === Object.prototype; // true

上記コードでtrueになるのが確認できます。

Object自体がオブジェクト

Object.prototypeと言う書き方はobj.nameのような書き方と全く同じです。
Objectという変数名でオブジェクトが定義されており、Objectのプロパティにprototypeが設定されています。

var Object = {prototype: {オブジェクトのプロトタイプ}};

ここまでの図解

そもそもObjectとは

Objectという変数はwindowに定義されている

このObjectという変数はブラウザのグローバルオブジェクトであるwindowに定義されています。

obj.__proto__ === window.Object.prototype; // true

おまけ：objという変数もwindowに定義されている

自分で作ったこのobjという変数もブラウザのグローバルオブジェクトであるwindowに定義しています。

window.obj.__proto__ === window.Object.prototype; // true

ここまでの図解

いよいよプロトタイプチェーンに触れていく

MDNのリファレンスを見るとObject.prototypeにはtoString()というメソッドがあることがわかる。
試しに呼んでみる。

console.log(obj.name); // taro -> わかる

console.log(
  obj.__proto__.toString
); // function　toString() { [native code] } -> 実装はネイティブコードらしい

これはどうなる？

console.log(
  obj.toString
); // function　toString() { [native code] }  -> 呼べてしまった

console.log(
  obj.hogehoge
); // undefined -> 未定義？

プロトタイプチェーンの仕組み

1. 指定したオブジェクトにプロパティが存在を調べる
2. なかった場合__proto__が参照する先で存在を調べる
3. それでもなかった場合__proto__が参照する・・・（ループ）
4. 最終的にnullになるまで行う。nullならundefinedを返す

Objectのプロトタイプの__proto__はnull

obj.__proto__.__proto__ === null; // true
Object.prototype.__proto__; // null

つまり__proto__を辿ってObject.prototypeで見つからなかったらundefinedを返すということ。

※obj.__proto__とObject.prototypeは同じものです（重要なので何度でも書く）

ここまでの図解

プロトタイプチェーンの流れを見る

先程記述したそれぞれのパターンごとに動きを見てみます。

• obj.name （インスタンスに存在するパターン）
• obj.toString （プロトタイプチェーン先に存在するパターン）
• obj.hogehoge （最後まで見つからないパターン）

obj.nameを探す際の動き

1.objを探す

2.obj.nameを探す

obj.toStringを探す際の動き

1.objを探す

2.obj.toStringを探す

3.obj.__proto__を探す

4.obj.__proto__.toStringを探す

obj.hogehogeを探す際の動き

1.objを探す

2.obj.hogehogeを探す

3.obj.__proto__を探す

4.obj.__proto__.hogehogeを探す

5.obj.__proto__.__proto__を探す

Functionオブジェクトについて

さらにプロトタイプチェーンを深く知るにはFunctionオブジェクトについて知る必要があります。

※Objectでだいぶプロトタイプチェーンに強くなっているはずです。説明もささっといきます。

シンプルなFunctionオブジェクトを作る

var func = function(){console.log("hello");};

var func = new Function('console.log("hello");');

上記2つのほぼ同じオブジェクトを作っています。(後者はfunc.nameが"anonymous"になったりする）
※function(){}はnew Function()の糖衣構文

Functionの__proto__

Objectのインスタンスの__proto__はObject.prototypeでしたね。

(new Object()).__proto__ === Object.prototype; // true

この形はObject以外でも同じです。

(new Function()).__proto__ === Function.prototype; // true
(new Array()).__proto__ === Array.prototype; // true

つまり、FunctionもObjectと同じようなプロトタイプが構成されている

ここまでの図解

Functionのプロトタイプにも__proto__がある

プロトタイプチェーンは__proto__を辿るんでしたね。
みてみます。

console.log(func.__proto__.__proto__);

これObjectのときに出てきたやつだ！！

FunctionもObjectのプロトタイプチェーンが組まれている

Function.prototype.__proto__ === Object.prototype; // true

Function.prototypeにtoStringが定義されているため（いわゆるオーバーライド）
toStringはFunction.prototype.toStringになります。

func.toString(); // function (){console.log("hello");}
func.toString === Function.prototype.toString; // true;

ここまでの図解

コンストラクタ関数

コンストラクタ関数はnew XXX()に入るXXX関数のこと。
つまりObjectやFunctionなどはコンストラクタ関数として使用できるFunctionオブジェクト。

constructorプロパティ

コンストラクタ関数を参照するためのプロパティ。
プロトタイプやインスタンスが持っている。

var obj = {};
Object.prototype.constructor === Object; // true
obj.constructor === Object; // true

var func = function(){};
Function.prototype.constructor === Function; // true
func.constructor === Function; // true

ここまでの図解

最初に見たArrayのMDNにアクセスして見てみよう

ある程度は読めるようになったはず

なってなかったら・・・筆者の説明スキル不足、申し訳ない

本記事の内容が理解できていれば
MDNと以下のコードで次ページのようなイメージができるはずです。

var myArray = [];
myArray.push("hoge"); // これはプロトタイプチェーン先のメソッドから呼べる
myArray.isArray; // 何が返るかわかりますね？
// myArray.isArray(); // undefined()を実行しているようなもの
Array.isArray(myArray); // true isArrayの使い方はこう

あとがき

プロトタイプチェーンを理解できた人が一人でも多くいれば幸いです。

本記事の目的はプロトタイプチェーンを理解することです。
プロトタイプチェーンを使ってごりごり実装しようということではありません。
原則としてはclass構文使いましょう。（classも内部的にはプロトタイプチェーン）

参考資料

書籍
開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質
Effective JavaScript　JavaScriptを使うときに知っておきたい68の冴えたやり方
JavaScript Ninjaの極意

記事
[JavaScript] そんな継承はイヤだ - クラス定義 - オブジェクト作成
や...やっと理解できた！JavaScriptのプロトタイプチェーン