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

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

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

さらっと書かれているprototype

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

本記事の目的

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

確認環境や記述について

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

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

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

リテラルでオブジェクトを作る

var obj = {name: "taro"};

new演算子でオブジェクトを作る

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 -> 未定義？

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

指定したオブジェクトにプロパティが存在を調べる
なかった場合__proto__が参照する先で存在を調べる
それでもなかった場合__proto__が参照する・・・（ループ）
最終的に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オブジェクトを作る

リテラルでFunctionオブジェクトを作る

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

new演算子でFunctionオブジェクトを作る

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__を辿るんでしたね。
みてみます。

__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プロパティ

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

今まで出てきた例の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のプロトタイプチェーン

さらっと書かれているprototype

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

本記事の目的

確認環境や記述について

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

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

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

Objectを展開

__proto__のObjectを展開

ここまでの図解

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

MDNで検索

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

Object自体がオブジェクト

ここまでの図解

そもそもObjectとは

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

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

ここまでの図解

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

これはどうなる？

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

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

ここまでの図解

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

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オブジェクトを作る

Functionの__proto__

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

ここまでの図解

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

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

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

ここまでの図解

コンストラクタ関数

constructorプロパティ

ここまでの図解

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

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

あとがき

参考資料

`proto`のObjectを展開

`Object`自体がオブジェクト

そもそも`Object`とは

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

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

Objectのプロトタイプの`proto`はnull

`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の`proto`

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