PRESSMAN*Tech

HTML5, CSS3からWordPress, AWS, Elasticsearchまで。プレスマンのスタッフが綴る技術ブログ。

prototypeのはなし(その1)

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も一緒。

つづく

投稿者:taichi

taichi の紹介

何でもやりますが、一応プログラマです。
このエントリーをはてなブックマークに追加

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

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

プレスマンの採用情報を見る →

コメントは受け付けていません。

▲ 先頭へ戻る