■補講　(JavaScriptの)オブジェクト指向がわからない人向け
　JavaScriptはプログラム言語ですが、人によってはイメージしにくい部分もあります。そもそも、オブジェクト指向が分からないという人もいるでしょう。
　そこで、簡易的にですがOSのフォルダとファイルなどを利用してビジュアルで説明してみます。厳密には内部の動作と違う部分もありますが、目で見て覚える範囲であれば大きな問題はないかと思います。また、説明の都合で細かい部分は省略しています。


------------------------------------------------------------------------------------------------
■オブジェクト／メソッド／プロパティ

　それでは、まずブラウザの中にあるJavaScriptをのぞいてみましょう。ブラウザのアイコンをダブルクリックします。（説明の都合、これはフォルダにしてあります）

【図】001.png

するとブラウザの中にあるJavaScriptのオブジェクトが表示されました。フォルダがたくさんあります。このフォルダがJavaScriptでのオブジェクトになります。ArrayやDateなど様々なオブジェクト（フォルダ）があるのが分かります。フォルダには赤色で示されているものがあります。これはJavaScriptのコアオブジェクト（ECMAScript-262という仕様書で定義されているもの）です。これらは、どのブラウザでも共通して使う事ができるオブジェクトです。

【図】002.png

本書で解説しているHTML5のAPIの多くはWindowオブジェクト内に入っています。それではWindowオブジェクト（フォルダ）の中を見てみましょう。Windowのフォルダをダブルクリックします。緑色で示したフォルダが本書で解説するHTML5のAPI関連のオブジェクトです。

【図】003.png

Windowフォルダにはフォルダだけでなく書類や実行可能ファイルアイコン（.exeとついているファイル）が表示されています。フォルダ＝オブジェクトですから、オブジェクトの中にさらにオブジェクトがあることになります。フォルダ内にフォルダがいくつ入っていても問題がないようにJavaScriptでもオブジェクトの中にたくさんのオブジェクトが入っていても問題ありません。ただし、同じ階層では同名のオブジェクトを作成することはできません。これは同じ名前のフォルダが同じ階層に作成できないことと同じです。

フォルダはオブジェクトだと説明しました。それでは書類ファイルは何になるのでしょうか？　これはJavaScriptではプロパティになります。プロパティには値や文字が入っています。実際に確認してみましょう。innerHeightの書類をダブルクリックします。すると図のように中身が表示されました。700とあります。

【図】004.png

これがプロパティの値になります。JavaScriptでは数値でも文字列でもバイナリデータでも区別なく入れることができます。

フォルダと書類アイコン以外に、もう１つ実行可能ファイルのアイコンがあります。これは決められた処理を実行するプログラムですが、JavaScriptではメソッドになります。つまり、何かを処理するわけです。何を処理するかはメソッドによって異なっています。どのような処理をするのかはJavaScriptリファレンスなどで確認しないといけません。

------------------------------------------------------------------------------------------------
■オブジェクトの生成(new)

　JavaScriptでプログラムを作成する時にはオブジェクト生成する作業があります。生成するといってもnewを使って元のオブジェクトのコピー（インスタンス）を作成するだけです。例えば配列を生成する場合は以下のように書かれます。

myData = new Array();

これを先ほどと同様にフォルダを使って説明してみます。まず、Arrayオブジェクトのフォルダの複製を作成します。

【図】005.png

複製すると「Arrayのコピー」といった名前でフォルダの中身がそのままコピーされたフォルダができあがります。この処理がnew Array()です。それでは、生成したオブジェクト（フォルダ）を変数myDataに入れるにはどうなるのでしょう？　これはプログラムで使われる別の領域（フォルダ）に入ることになります。

【図】006.png

次に指定された変数名（名前）に変更します。

【図】007.png

これで配列変数myDataが作成できたことになります。


------------------------------------------------------------------------------------------------
■プロトタイプ／継承(prototype)

　JavaScriptはオブジェクトにプロパティや機能を追加した場合、親オブジェクトにあるprototypeチェーンをたどっていきます。それでは、先ほど作成した配列変数myDataに加えて、もう1つuserDataという名前の配列変数を生成しましょう。プログラムで書くと以下のようになります。

userData = new Array()

フォルダを使って説明すると先ほどと同様にArrayフォルダの複製を作った後に、特定のフォルダに移動させます。その後、名前をuserDataに変更します。

【図】008.png

myArrayもuserDataもArrayオブジェクト（フォルダ）を複製して作ったものですから中身は同じです。

【図】009.png

ここで、配列に機能を追加した方が開発効率がアップするとしましょう。できれば全ての配列で使いたいのですが、どうしたらよいのでしょう？
生成済みの配列であれば

userData.add = function(){〜}

【図】010.png

として機能を追加することができます。でも、これだと既に生成されているmyDataにも同じように書かなければいけません。

myData.add = function(){〜}

【図】011.png

この方法だと生成した全ての配列に書かなければならず手間がかかりますし、消費するメモリも多くなります。そこで、このような場合、prototypeを使って生成元（大もと）のオブジェクトに機能を追加してしまうという方法があります。
さきほどの図をよく見るとprototypeというフォルダがあるのがわかるでしょう。さらに、よく見るとこのフォルダはエイリアス（ショートカット）になっています。このフォルダの実体は一体どこかと言えば生成元のArrayフォルダの中にあります。

【図】012.png

JavaScriptはオブジェクトに指定されたメソッド／プロパティがない場合、prototype（図ではフォルダ内）に該当するメソッドやプロパティがあるか調べます。あれば処理しますし、なければ処理しないかエラーになります。
全ての配列にまとめて機能を追加するには以下のようにprototypeを使って書きます。

Array.prototype.add = function(){〜}

すると、どうなるかと言うとArrayオブジェクト（フォルダ）内に機能が追加されるのです（図ではArrayフォルダのprototypeフォルダ内）。

【図】013.png

これでmyData、userData配列では追加した機能を利用することができるようになります。ただし、大元のオブジェクトに機能を追加して書き換えてしまうわけですから下手に使用するとトラブル（不具合）の原因にもなります。