prototype.jsを読み解く
第1回 Prototypeライブラリ(1~197行目)
はじめに
今回から,Prototypeライブラリについて,中身のコードを読みながら,実装として中で何が行われているのかを見ていこうと思います。
想定している読者は,Prototypeライブラリをただ使うだけでなく,やっていることを理解したいという方,使われているコードを応用して自分なりの改造をしてみたい方,などです。
今回の連載では執筆開始時点の最新版であるバージョン1.5.1.1を対象としています。現在1.6.0rcが準備されていますが,説明の都合上行番号に大きく依存しているため,最後までバージョン1.5.1.1を対象とすることになります。
Prototypeライブラリの構成
名前空間
このライブラリでは,グローバルな名前空間のうち,以下のものを使っています。
| 名前 | 実体 |
|---|---|
| Prototype | オブジェクト |
| Class | オブジェクト |
| Abstract | オブジェクト |
| Try | オブジェクト |
| PeriodicalExecuter | Prototypeライブラリ式クラス |
| Template | Prototypeライブラリ式クラス |
| $break | 空オブジェクト |
| $continue | Error形のインスタンス,後方互換性のため |
| Enumerable | オブジェクト |
| $A | Array.from関数オブジェクトの別名 |
| $w | 関数オブジェクト |
| Hash | コンストラクタとしての関数オブジェクト |
| $H | 関数オブジェクト |
| ObjectRange | Prototypeライブラリ式クラス |
| $R | 関数オブジェクト |
| Ajax | オブジェクト |
| $ | 関数オブジェクト |
| Element | オブジェクト(元々ブラウザが持っていない場合に作成) |
| Toggle | オブジェクト |
| Insertion | オブジェクト |
| Selector | Prototypeライブラリ式クラス |
| $$ | 関数オブジェクト |
| Form | オブジェクト |
| Field | オブジェクト。Form.Elementの別名 |
| $F | 関数オブジェクト。Form.Element.Methods.getValueの別名 |
| Event | オブジェクト(元々ブラウザが持っていない場合に作成) |
| Position | オブジェクト |
他のライブラリや,自分のコードと共存させるときは,これらの名前と衝突しないように気をつける必要があります。同じ名前を使ってしまうと,コードがロードされた順番によって挙動が変わる,というようなわかりにくい問題が発生してしまう場合が出てきます。
オブジェクト,クラスの使われ方
ライブラリ内では,上記の名前空間は大きく分けて以下のような使われ形をしています。
- その下に別のオブジェクトを入れるための親名前空間として使う
- Class.create()を使って Prototypeライブラリ風のクラスとして定義する
- Object.extend()を使って他のクラス,オブジェクトから継承されることを前提とする関数を集める
- コードを簡潔に記述する為に短い名前の関数として使う
特に,Object.extend()を使って継承を実現している箇所が多く,最終的にどのオブジェクト・クラスにどのメソッドが定義されているのかがわかりにくい所があります。
コードを追っていく場合は,その名前のオブジェクトの定義部分だけではなく,Object.extend()で拡張されている部分も追っていく必要があります。
既存オブジェクトへの拡張
Prototypeライブラリの特徴の一つとして,既存のオブジェクトへの拡張を行っているというものがあります。
大きくはElementやArray,Stringに対して多数のメソッドを追加していますし,Function,Object,Number,Dateにもいくつかメソッドが追加されています。
これらの追加メソッドは便利なものが多いのですが,副作用に気をつける必要があります。
JavaScriptでコード上でプロパティとして追加されたメソッドには,属性として DontEnum属性を追加することができません。そのため,拡張されたオブジェクトのインスタンスを作成しfor (var i in obj)などでプロパティを列挙すると,他の組み込みメソッドなどとは異なり通常のプロパティとして列挙されるプロパティに含まれるようになってしまいます。
このことを忘れていると,「自分が追加していないプロパティがなぜか含まれている!」ということになり,デバッグに手間取ることになりがちです。
var a = new Array;
a.push(100);
a.push(200);
for (var i in a) {
console.log(i);
}
というコードでは,配列内の2要素だけが列挙されることを期待したいのですが,Prototypeライブラリをロードした後では,Array.prototypeにメソッドがプロパティとして追加されていますので,0,1というインデックス値のプロパティ以外にも,それらのメソッドが列挙されてしまいます。
この場合は,例えばArrayならfor (var i = 0; i < a.length; i++) { ... }という形で列挙するか,Array.each()などのイテレータメソッドを使う,という形にする必要があります。
先頭のコメント,著作権表示
0001: /* Prototype JavaScript framework, version 1.5.1.1
0002: * (c) 2005-2007 Sam Stephenson
0003: *
0004: * Prototype is freely distributable under the terms of an MIT-style license.
0005: * For details, see the Prototype web site: http://www.prototypejs.org/
0006: *
0007: /*--------------------------------------------------------------------------*/
0008:
7行目まではコメントです。PrototypeライブラリはMITスタイルのライセンスであることが宣言されています。 このライセンスであるおかげで,商用製品であろうとも利用が可能となっていて,普及が促進されたという側面もあるでしょう。
prototype.jsを読み解く
- 第10回 Prototypeライブラリ(2846~3276行目)
- 第9回 Prototypeライブラリ(2621~2845行目)
- 第8回 Prototypeライブラリ(2277~2620行目)
- 第7回 Prototypeライブラリ(2052~2276行目)
- 第6回 Prototypeライブラリ(1609~2051行目)
- 第5回 Prototypeライブラリ(1290~1608行目)
- 第4回 Prototypeライブラリ(932~1289行目)
- 第3回 Prototypeライブラリ(640~931行目)
- 第2回 Prototypeライブラリ(198~639行目)
- 第1回 Prototypeライブラリ(1~197行目)
-
JSライブラリ「jQuery」と「prototype.js」の特徴。
数あるJavascriptライブラリの中で代表的な「jQuery」と「prototype.js」。
今までは何らかの機能が必要になった際にググったり本で調べたりして、見付けたものをベースに何とか形にし...Tracked : #2 btmup Blog [tech] (2008/12/15, 00:23)
-
JavaScript
Top JavaScript † ↑Prototype.js † prototype.jsを読み解く:第1回 Prototypeライブラリ(1~197行目)|gihyo.jp
Tracked : #1 Blog-tech(ブログテック) (PukiWiki/TrackBack 0.3) (2007/09/08, 10:44)


