prototypeがよくわからない件 - おもしろwebサービス開発日記

ここ３日くらい、この本を読んでJavaScriptの基礎を学んでいました。

作者: 大津真
出版社/メーカー: オーム社
発売日: 2006/09/23
メディア: 大型本
購入: 1人クリック: 75回
この商品を含むブログ (20件) を見る

だいたい一通り流し読んだのですが、難しい部分がはしょられていて「なんでそうなるの？」という部分がいくつかありました。主にprototypeのとこ。
本だけではいかんともしがたい状況なのでググったのですが、それでもまだ曖昧な部分が残ります。

こればっかりに時間を割く訳にも行かないので、ひとまずわかったところとわからないところをまとめて、後日調べようかと思います。というわけで、以下個人的メモ。

prototypeわかったところ

こんな感じで、定義ずみのオブジェクトにメソッドを追加できる。

function hoge() {}
hoge.prototype.hello = function () {
  alert("hello!");
}

既存の組み込みオブジェクトのメソッドを変更できる

Date.prototype.toLocalString = function (){
   return this.getFullYear()+'年'+
   this.getMonth()+1+'月'+
   this.getDate()+'日'+
   this.getHours()+'時'+
   this.getMinutes()+'分'+
   this.getSeconds()+'秒';
}

継承ができる

function Animal () {}
Animal.prototype.isAnimal = function () {
   return true;
}

function Dog (name) {
   this.name = name;
}

Dog.prototype = new Animal();    // <------(1)

Dog.prototype.bark = function () {
   alert(this.name + ': わんわん');
}

pochi = new Dog('ぽち');
pochi.bark();
alert( pochi.isAnimal() );

prototypeわかってないところ

1.コンストラクタがあるオブジェクトを継承する場合。本にはこんな感じで書いてある*1。

function displayInfo() {
  document.write(this.name);
}

function customer(name){
  this.name = name;
  this.displayInfo = displayInfo;
}

function goldCustomer(name, goldPoint) {
  this.base = Customer;
  this.base(name, goldPoint);
  this.goldPoint = goldPoint
}

goldCustomer.prototype = new customer;

上記のコードに加え

var customer1 = new goldCustomer("willnet", 100);
customer1.displayInfo();

としたときに、displayInfoが実行されるのはわかるけど、"willnet"が入っているのはcustomer1.base.nameなのでこのコードだとできないんじゃないかなと思った。
でも実際やってみたらできた。どういう理屈なんだろう。

2.組み込みオブジェクトの定義がどのように書かれているか

オブジェクトの定義でthis.hoge()みたいな形で書かれていたら、this.prototype.hogeを定義しても前者が有効になるというのが（4/4）知られざるJavaScriptの世界 - 知られざるJavaScriptの世界：ITproに書いてあった。ということは、prototypeで拡張できる組み込みオブジェクトは、this.hoge()のようにメソッドを定義していないことになる。ってことはDate.prototype.toLocaleScring = hogehogeという書き方かな？

3.（4/4）知られざるJavaScriptの世界 - 知られざるJavaScriptの世界：ITproに、

下記のように定義してもnew Hogeした時には反映されないと書いてあったが理由がよくわからない。

Hoge.foo = function{
  aleart("hogehoge");
 }

参考文献

*1:ちょっと省略してます