Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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はこちら
Feedlyのフォローはこちら

おすすめの記事

入門者がつまづく、thisの挙動を4種類に分けて簡単に学ぶならこれ。Apply, callの挙動までわかる。
JavaScriptの「this」は「4種類」?」

JavaScriptでは関数はすべてクロージャ。
そもそもクロージャって?JavaScriptでクロージャ入門

takeharu
【名前】三上丈晴 【経歴】北海道大学理学院数学専攻を経て、2012年新卒入社。現在ピグパーティ プロダクトマネージャ 【著書】Git逆引き入門
https://twitter.com/takeharumikami
cyberagent
サイバーエージェントは「21世紀を代表する会社を創る」をビジョンに掲げ、インターネットテレビ局「AbemaTV」の運営や国内トップシェアを誇るインターネット広告事業を展開しています。インターネット産業の変化に合わせ新規事業を生み出しながら事業拡大を続けています。
http://www.cyberagent.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away