TOPシステム開発> Prototype.jsを使ってみよう
まるごとJavaScript&Ajax!
JavaScriptを洗練させるPrototype.js

第3回:Prototype.js流のオブジェクト指向を理解する
著者:ガイアックス  天野 仁史   2007/2/28
1   2  次のページ
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を使ってみよう
  クラスの継承