第3回：Prototype.js流のオブジェクト指向を理解する (1/2)

TOP＞システム開発＞ Prototype.jsを使ってみよう

JavaScriptを洗練させるPrototype.js

第３回：Prototype.js流のオブジェクト指向を理解する
著者：ガイアックス天野仁史 2007/2/28

Prototype.jsを使ってみよう

さあ、ここから本題のPrototype.jsです。本記事では、Prototype.jsの機能の中でも、代表的な「オブジェクト指向の機能」「関数を拡張する機能」「配列の操作を拡張する機能」「DOMの操作に関する機能」について紹介いたします。

そして、最終的にはひとつの実用的なクラスを作ります。Prototype.jsをより使いこなすということを重視し、あまり使われない機能などは紹介しないこととします。

Prototype.js流オブジェクト指向

Prototype.jsのもっとも重要な機能は、オブジェクト指向に関連する機能です。「はじめに」でも述べたように、統一された方法でオブジェクト指向を書けるということが、オブジェクトの保守性を非常に良くしてくれるのです。

Prototype.jsでは、オブジェクト指向の代表的な機能として「クラス」と「継承」を提供しています。

クラスの定義

それでは、前回定義したリスト8のクラスをPrototype.js流に書き換えてみましょう（リスト9）。

リスト8：プロトタイプによる初期化（再掲）

var Human = function(name) {
   this.name = name;
};

Human.prototype = {
   sayMyName: function() {
      alert(this.name);
   }
};

var amachang = new Human('天野');

リスト9：Prototype.jsによるクラス定義

// Human クラスを定義する
var Human = Class.create();

Human.prototype = {

   // コンストラクタ
   initialize: function(name) {
      this.name = name;
   },

   // メソッド
   sayMyName: function() {
      alert(this.name);
   }
};

Prototype.jsではClass.createというメソッドを使ってクラスを生成します。そして、コンストラクタの機能はinitializeメソッドが持つようになります。

リスト8の例では、クラス定義がコンストラクタとプロトタイプに分かれていましたが、Class.createを使うことによってひとつにまとめることができます。また、関数オブジェクトによって直接クラスを定義するよりは、Class.createと書いたほうが、後から読み返したときに、これがクラスとして使われるのだということがよくわかります。

1 2 次のページ

著者プロフィール
株式会社ガイアックス天野仁史
渋谷で働くWebプログラマ。出身は石川県金沢市。21歳でプログラミングに出会い、IT戦士になることを決意。それからというもの、寝ても覚めてもプログラムを書き続け今に至る。はてなでamachangというidでブログを書いてます。

IT戦記
http://d.hatena.ne.jp/amachang/

INDEX
第3回：Prototype.js流のオブジェクト指向を理解する
	Prototype.jsを使ってみよう
	クラスの継承

JavaScriptを洗練させるPrototype.js
第1回	Prototype.jsを使う準備
第2回	JavaScriptの復習
第3回	Prototype.js流のオブジェクト指向を理解する
第4回	関数の拡張と配列操作メソッド一覧
第5回	代表的なメソッドの紹介
第6回	DOMの拡張（前編）
第7回	DOMの拡張（後編）