JavaScriptのプロトタイプからオブジェクト指向を学ぶ

Last updated at 2015-12-07Posted at 2013-04-11

JavaScriptの「プロトタイプ入門」

JavaScriptはオブジェクト指向です。

クラスという概念はないため、
擬似的なクラスの表現を使ったパターンがあります。

ただ今回はそちらではなくプロトタイプベースの説明をします。

その前にコンストラクタについて知らない人はこちらへ。
JavaScriptのクラス？コンストラクタ？

#プロトタイプって？

そもそもプロトタイプってなに？

実は、、プロトタイプとは「オブジェクト」のことなんです。
そして感覚としては親だと思って大丈夫です。

親の能力は子にも受け継がれている。。的なニュアンスですね。
（まぁ意味合いはちがいますがw）

#prototypeプロパティ

ここで新規に関数を生成してみましょう。
そうするとprototypeプロパティが自動で作成されます。

function proto() {} //proto.prototypeは自動で生成

このように関数を生成した時点で、
proto.prototypeプロパティが自動で生成されます。

そしてそれは新たな空オブジェクトへの参照を持っているんですね。
そしてprototypeプロパティは自分の親への参照だと思って下さい。

ここは非常に重要です。。。
ということで見るより慣れろ！

先に実用例をチェックします。

#実用例

function Dog() {}
Dog.prototype.bark = function() {
  console.log('わんわん');
};

var dog = new Dog();
dog.bark(); //'わんわん';

といった感じです。。
dog自体は何も持っていませんが、
親がbark関数を持っているので、あたかも自分のようにつかえちゃいます。

あれ、でもこれって…下と何が違うの？？

function Dog() {
  this.bark = function() {
    console.log('わんわん');
  };
}
var dog = new Dog();
dog.bark(); //'わんわん';

ふーむ、挙動は一緒ですね。
ただ前者のほうがbetterです。

実は後者だと毎回毎回関数が生成されちゃうんです！

・・・？？

前記事でも説明しましたが、
newはこんな暗黙のルールをもっています！

function Dog() {
  // var this = {};
  this.bark = function() {
    console.log('わんわん');
  };
  // return this;
}

なのでこれでは毎回空オブジェクトを作成し、
毎回新しくbark関数を定義しちゃっていますね。。

そこでプロトタイプの出番です！
そしてプロトタイプは親だと思ってください。
そして子は親のプロパティを共通で使えちゃいます！

ここでも実践例！

function Dog(cry) {
  this.cry = cry;
}
Dog.prototype.bark = function() {
  console.log(this.cry);
};

var chiwawa = new Dog('きゃんきゃん');
chiwawa.bark(); //'きゃんきゃん';

var shiba = new Dog('わんわん');
shiba.bark(); //'わんわん';

といった感じです。

これだと関数は無駄に生成されていませんね♪
なぜならnewを使った挙動は下記だからですね。

function Dog(cry) {
  // var this = {};
  this.cry = cry;
  // return this;
}

そしてポイントです！
newを使った場合のthisのプロトタイプは、
Dogのプロトタイプと同じ参照を持っています！

すなわちこれによって生成されたインスタンスはbark関数が使えちゃいます。

#実践のポイントは一点のみ

単純にプロトタイプを使用したい場合は、
ポイントは一点のみ！

・汎用的な関数はprototypeに定義

これだけです！

プロトタイプ（親）に汎用的な関数を定義し、
あとはインスタンス（子）はみんなで仲良くその一つを使うわけですね。

そして関数以外は上のcryのように子自身に定義しちゃいます。

とまぁ、入門としてはこの使い方ができれば十分だと思います。
ではでは、おさらばです♪

外部アカウント

技術情報のみつぶやくアカウント作成しました。JavaScriptは最新情報も追っていきます。
[Twitterはこちら]
(https://twitter.com/takeharumikami)
[Feedlyのフォローはこちら]
(http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fqiita.com%2Ftakeharu%2Ffeed)

JavaScriptのプロトタイプからオブジェクト指向を学ぶ

JavaScriptの「プロトタイプ入門」

外部アカウント

おすすめの記事