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




まるごとJavaScript&Ajax!
JavaScriptを洗練させるPrototype.js

第３回：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  次のページ
書籍紹介
まるごとJavaScript&Ajax!

 まるごとJavaScript&Ajax! Vol.1 JavaScriptの一人者たちが教える最新ノウハウ
Ajaxの登場により、JavaScriptは最もホットなプログラミング言語になりました。そのJavaScriptとAjaxについて、最新ノウハウをまるごと解説します。
今や欠かせない、Prototype.jsをはじめとするJavaScriptライブラリを紹介します。IE 7やFirefox 2などの最新ブラウザーの新機能と、来るべきJavaScript 2についてもわかります。Web以外でのJavaScriptの利用テクニックも読めます。
JavaScriptを知り尽くした第一人者たちに学ぼう！

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

IT戦記
http://d.hatena.ne.jp/amachang/
この記事の評価をお聞かせください
 ボタンをクリックしますとウインドウが開きます。
 ご意見、ご要望にお応えします！ インプレスIT INSIDE
INDEX
第3回：Prototype.js流のオブジェクト指向を理解する
Prototype.jsを使ってみよう
  クラスの継承
JavaScriptを洗練させるPrototype.js
第1回 Prototype.jsを使う準備
第2回 JavaScriptの復習
第3回 Prototype.js流のオブジェクト指向を理解する
第4回 関数の拡張と配列操作メソッド一覧
第5回 代表的なメソッドの紹介
第6回 DOMの拡張（前編）
第7回 DOMの拡張（後編）

Think IT 過去人気記事

Think IT
注目おすすめ情報

Think IT人気ライター BEST 5

People
IT製品/サービス資料ダウンロード
    おすすめのホワイトペーパー情報を準備中です