Pocket

プロトタイププロパティ

JavaScriptで関数を生成すると自動で、prototypeプロパティが生成されます。

関数(オブジェクト)をコンソールで確認

このprototypeプロパティにメソッドを追加することで、生成したインスタンスからメソッドをコールすることができるようになります。

protorypeにメソッド追加

new演算子の暗黙のルール

prototypeプロパティを使用せずに、下記のように定義することもできます。

しかし、これをコンソールで確認してみるとshowメソッドがインスタンスに生成されています。

prototypeを使用しない例

これはnew演算子の暗黙のルールで、関数の生成と共に var this = {};が定義されて、それを return this;していることにあります。

2行目と7行目のコメントアウトしている箇所が暗黙のルールになります。無駄な関数(オブジェクト)の生成をしないという点でもprototypeプロパティを使用しての定義が良いようです。

プロトタイプチェーン

new演算子で一度インスタンス化したオブジェクトにしたあとに、クラス自体にメソッドやプロパティを追加するとインスタンスは、それを参照することができます。読み込みと書き込みで継承動作が異なります。違いを以下のコードで確認します。まずは、読み込み編。

8行目でyというプロパティを追加しました。その後、インスタンスfooyを参照できることが確認できました。続いて、下記のコードは、prototypeに実装したプロパティの値を上書きして、別のインスタンスからその値を参照した場合の例。

prototypeで定義したプロパティの値を書き換えたにも関わらず、インスタンスbaryの値は元のままです。書き込み時にはプロトタイプチェーンをたどらないことがわかります。インスタンスが直接のプロパティをみているということになります。

インスタンスからプロパティを削除してみるとわかります。

12行目でインスタンスfooからyプロパティをdeleteした後に、yを参照してみると「5」という値が出力されました。これは親(prototype)のyを参照しているということになります。なるほど、スッキリ。