JavaScript 第 5 版 9 章まとめ

だいぶ間が空いてしまいましたが、サイ本の続きです。
今回は 9 章。自分がちゃんと身につけたいと思っていたプロトタイプやコンストラクタの内容。
ちゃんと理解して実践に活かしたい。

9 章 クラスとコンストラクタとプロトタイプ

9.1 コンストラクタ

• new 演算子と一緒に使うための関数をコンストラクタ関数という。
• コンストラクタ関数が呼び出されるとそのオブジェクトが this キーワードの値になる。

9.2 プロトタイプと継承

• メソッドとして関数を呼び出すと、関数を呼び出す時に使われたオブジェクトが this キーワードの値になる。
• すべての JavaScript オブジェクトには、プロトタイプオブジェクトというオブジェクトへの参照が含まれ、プロトタイプオブジェクトからプロパティを継承する。
• new 演算子を使ってオブジェクトを生成すると、そのオブジェクトに対してプロトタイプを設定する。
• 継承はプロパティの値を探す処理の一部として自動的に行われる。
• プロパティはプロトタイプからコピーされるのではなく、オブジェクトのプロパティであるかのように見える。
• プロトタイプオブジェクトを使用することで、たくさんのオブジェクトがプロパティを継承するので、メモリを節約できる。
• また、プロパティの値を探す処理でプロトタイプを参照するので、オブジェクトを生成した後にプロトタイプを追加した場合でも継承できる。
• よって、そのクラスのすべてのオブジェクトに対して同一のプロパティを定義する場合（メソッドなど）に限って使用するのが適切である。

// コンストラクタ関数
function Rectangle(width, height) {
  this.width = width;
  this.height = height;
}

// プロトタイプオブジェクトを生成
Rectangle.prototype.area = function() {
  return this.width * this.height;
}

var r = new Rectangle(2, 3);
r.width;  // 2
r.area();  // 6 が返る。プロトタイプオブジェクトから継承されている。
for(var o in r) {
  alert(o);  // width, height, area。for/in でも調べられる。
}
r.hasOwnProperty("width");  // r 直属のプロパティなので true
r.hasOwnProperty("area");  // r から継承されたプロパティなので false

9.2.1 継承プロパティへのアクセス

• 1 つのプロトタイププロパティが複数のオブジェクトによって継承される。よってプロパティの値の継承が有効なのは読み出す時に限られる。
• プロトタイプオブジェクトのプロパティに値を書き込もうとすると、元のオブジェクトに新しいプロパティが生成され、以降はプロトタイプからはそのプロパティは継承しない。

9.2.2 組み込み型の拡張

• String や Date などの組み込みクラスのプロトタイプオブジェクトにも値を代入できる。
• Object.prototype にはプロパティを追加してはいけない。追加するとすべての JavaScript オブジェクトで、追加したプロパティやメソッドが for/in ループで調べられるようになるため、オブジェクトを連想配列として利用するとうまく動かなくなる。

9.3 JavaScript の「クラス」

• JavaScript はオブジェクトと呼ばれるデータ型をサポートしているが、クラスという正式な概念はない（JavaScript 2 ではサポートされるとのこと）。

9.3.1 インスタンスプロパティ

• オブジェクト毎にそれぞれ異なるプロパティのこと。
• JavaScript のオブジェクトプロパティは、デフォルトでインスタンスプロパティになる。

9.3.2 インスタンスメソッド

• 特定のオブジェクトを介して呼び出されるメソッドのこと。
• ただし、必ずしもすべてのオブジェクトが自分専用のメソッドを保持しているわけではなく、クラスのすべてのインスタンスで共有される。
• JavaScript の場合、コンストラクタのプロトタイプオブジェクトのプロパティに関数値を設定することで、クラスのインスタンスメソッドを定義する。

9.3.3 クラスプロパティ

• クラスのインスタンスではなくクラスそのものに関連づけられたプロパティのこと。
• JavaScript ではコンストラクタ関数自身のプロパティを定義することでクラスプロパティになる。

// コンストラクタ
function Rectangle(width, height) {
  this.width = width;
  this.height = height;
}

// クラスプロパティ
Rectangle.UNIT = new Rectangle(1, 1);  // 関数はオブジェクトなのでプロパティを定義できる

9.3.4 クラスメソッド

• クラスのインスタンスではなくクラス自身に関連したメソッドのこと。
• JavaScript ではコンストラクタ関数自身に関数を定義する。

// コンストラクタ
function Rectangle(width, height) {
  this.width = width;
  this.height = height;
}

// クラスメソッド
Rectangle.max = function(rect1, rect2) {
  if(rect1.width * rect1.height > rect2.width * rect2.height) {
    return rect1;
  } else {
    return rect2;
  }
}

var r1 = new Rectangle(5, 6);
var r2 = new Rectangle(7, 4);
Rectangle.max(r1, r2);

9.3.7 プライベートメンバ

• JavaScript ではクロージャを使うことでプロパティをカプセル化できる。

function ImmutableRectangle(width, height) {
  // オブジェクトに対してアクセッサーメソッドを定義する
  this.getWidth = function() { return width; }
  this.getHeight = function() { return height; }
}
var rect = new ImmutableRectangle(2, 3);
rect.getWidth();  // 2
rect.width;  // undefined

9.5 スーパークラスとサブクラス

• JavaScript の場合、Object クラスはすべての組み込むクラスのスーパークラスであり、その他のクラスは Object クラスのサブクラスと見なせる。
• プロトタイプオブジェクトは Object.prototype からプロパティを継承する。

9.5.1 コンストラクタチェーン

• 新しいオブジェクトに対してスーパークラスのコンストラクタを呼び出す処理をコンストラクタチェーンという。
• 1 レベルのサブクラスしか持たない場合は、サブクラスのプロトタイプオブジェクトに superclass という名前のプロパティを追加することで対応できる。

9.5.2 オーバーライドされたメソッドの呼び出し

• サブクラスでスーパークラスと同じ名前のメソッドを定義すると、サブクラスはそのメソッドをオーバーライド（上書き）する。
• オーバーライドしたメソッドから元のメソッドを呼び出すために、メソッドチェーンという方法を利用する。

// スーパークラス Rectangle のコンストラクタ
function Rectangle(width, height) {
  this.width = width;
  this.height = height;
}
// スーパークラスに toString メソッドを定義する
Rectangle.prototype.toString = function() {
  return '[' + this.width + ', ' + this.height + ']';
}

// サブクラス PositionRectangle にも toString メソッドを定義する
PositionRectangle.prototype.toString = function() {
  return "(" + this.x + ", " + this.y + ") " + // このクラスのプロパティ
         Rectangle.prototype.toString.apply(this);  // スーパークラスの toString() を呼び出し
}

関連する記事

• 連続するページの JSONP を取得して最後に Callback 関数を呼ぶライブラリ
• 短縮 URL を展開する Greasemonkey
• 相手に Follow されてるかどうかを表示するグリモン
• マク語に変換する bookmarklet
• Twitter の投稿日時のフォーマットを変更するグリモン