プログラミング

prototypeのはなし(その1)

この記事は2年以上前ですので、内容が古い可能性があります

javaやPHPなどで慣れていると、どうしても理解しにくいのがjavascriptのprototypeとcall,applyだと思います。
別に理解できなくてもプログラム書けるんですけどね。とくにjQueryとか使っちゃうと。しかし、理解できてくるとjavascirpt超おもしろいです。
さて、prototypeがなんぞやっていうのは例によっていくらでも解説されているのでググってみて下さい。
ここではprototypeを使った例を挙げておきます。これだけでprototypeを理解する意図ではなく、理解の助けになれば程度です。


正直、prototypeについて読むだけで理解できるひとは天才じゃないかなと。普通わかんないッス。
解説を読んで、色々なソースを見たり書いたりして何となく理解した上で、もう一度しっかりと解説を読んで「おー、そういうことだったのか」となるのがいいやり方だと思います。
まあ、こんな記事を見てるよりサイ本しっかり読めばいいような気も。

とりあえず

  • functionでつくられた関数オブジェクトは全てprototypeプロパティを持っている。
  • あらゆるオブジェクトは__proto__プロパティを持っている。
  • この二つは当たり前だが別のプロパティである。
  • そして、プロトタイプチェーンって言われているのはprototypeプロパティじゃなくて__proto__プロパティのチェーン

って考えておくと理解しやすいです。
proto自体はECMAScriptで定義されている訳でなく一部の実装でのプロパティみたいだけどこれがあると考えると分かり易い)

例1

var Car = function(){};
Car.prototype.color = "black";
var car1 = new Car();
var car2 = new Car();
alert(car1.color); //black
alert(car2.color); //black

上記の例はprototypeが何かを多少でも理解していれば当たり前じゃん!といったところですね。
Carは関数オブジェクトなのでprototypeプロパティを持っています。その中身はconstructorプロパティだけを持つオブジェクトです。
つまり

Car.prototype = {constructor:Car}

みたいな感じかな?
ちなみに

Car.prototype.constructor === Car // => true

となりますが、訳わからなくなるのでconstructorはここでは無視。
car1が作成された時点でcar1にはprotoプロパティが自動で作成されてこれはCar.prototypeへ参照されます。つまり

car1.__proto__ === Car.prototype // => true

となるわけです。で、プロトタイプチェーンはそのオブジェクトが持っていないプロパティはprotoオブジェクトから探すので
car1.colorはcar1.proto.colorとなりCar.prototype.colorとなるわけでつまりblackなわけです。
car2も一緒。

つづく

この記事をシェアする:
◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇

私たちと一緒に働きませんか?

「prototypeのはなし(その1)」はいかがでしたか?
株式会社プレスマンでは、 WordPressが大好きな方、仕事を通してさらにスキルを磨きたい方を募集しています。 まずは募集職種をご覧の上、お気軽にお問い合わせください。 あなたとお会いできるのを楽しみにしています。

採用情報を見る

-プログラミング
-

© 2024 PRESSMAN*Tech Powered by STINGER