anything from here jQuery() の挙動を解読する(2) インスタンスプロパティ・メソッドとクラスプロパティ・メソッド──jQuery解読(6)

▼ Browsing MENU
||
ホーム
＞
Javascript | 2007年11月＞ this entry

初稿：2007/11/03

改訂：2007/11/21……用語を正確に書き換えた

再改訂：2007/11/27……ケアレスミスを修正した。

jQuery()とjQueryのそれぞれのプロパティとメソッド

init()内では、随所に jQuery(･･･).*** や jQuery(･･･).***() と jQuery.*** や jQuery.***() が多用されています。またinit()だけではなくjQuery全体で沢山出てきます。ここではこの２つの差異に着目し、これらが互いに全く別のものであることを確認し、またそれぞれの役割を解明したいと思います.

まずjQuery(･･･).***()はjQuery()関数のプロパティ又はメソッドです。正確に言えば、これらは new演算子とjQuery()コンストラクタ関数によって生成されるインスタンスオブジェクトのプロパティ又はメソッドであり、当該のインスタンス（＝thisキーワードで参照出来る）から参照されます。そしてそれは決して関数オブジェクトであるjQuery自体のプロパティやメソッドではありません。

一方、jQuery.***()は関数オブジェクトである変数jQueryのメソッドやプロパティであって、決して、new演算子とコンストラクタ関数によって生成され、init()メソッドにより初期化されるインスタンスオブジェクトのそれらではありません。

端的に言えば、前者はjQueryコンストラクタ関数から生成されるインスタンスオブジェクトのメソッドやプロパティであり、後者はjQuery自身のプロパティでありメソッドです。

ここに、jQueryのプロパティやメソッドは jQuery.extend() メソッドの実行（jQuery.jsの446行以下など）により定義されますますが、その extend() メソッドは 404～442 行で定義されています。そして実に巧みだと思うのは、その extend() メソッドは、同時にインスタンスオブジェクトのメソッドとしても定義されていることです（404行）。こうしてextend()メソッドは２つの機能を担っている訳で、jQueryのメソッド及びjQuery()コンストラクタ関数によるインスタンスオブジェクトのメソッドを拡張する手段として機能するようになっています。

そして、この拡張方法がプラグインを自在に作成することを容易に可能としていることも強調すべきjQueryの利点であり、同時にこの複層的構造が jQuery.js を難解にしている一因ともなっているのではないでしょうか？。

▲ToTop

jQuery()とjQueryの各々のextend()による拡張箇所リスト（該当行数リスト）

extend() 関数の実行によって jQuery オブジェクトと jQuery()コンストラクタ関数のインスタンスオブジェクトのそれぞれのプロパティとメソッドが様々に拡張される訳ですが、それらは次のように多用されています。（jQuery.js ver1.2.1 非圧縮版）

▼　jQuery()コンストラクタによるインスタンスオブジェクトの拡張

1855-1941（Event 関係）
2040-2126（Ajax 関係）
2507-2665（Animation 関係）
2904-2991（Offset 関係）

▼　jQueryオブジェクトの拡張

469-1008（基本）
1023-1044（BoxModelチェック）
1139-1565（DOM 関係）
1943-1976（DOM Ready 関係）
2137-2506（Ajax 関係）
2693-2738（Animation 関係）

インスタンスオブジェクトの拡張に241行が、そしてjQueryオブジェクトの拡張に1438行も充てられています。合計すると1679行となり、これらにextend()の定義の為の行数39行（404-442行）を加えた1718行は、全行数2965行の約58％を占めることになります。こうしてextend関数はjQuery.jsの１つのキーとなる関数と言えます。

▲ToTop

jQuery.jsインクルード時に定義されるグローバル変数 jQuery のプロパティとメソッド

インクルード時に定義されるjQueryオブジェクトのプロパティとメソッド図。クリックすると拡大図を表示します。

以上を踏まえて、jQuery.js インクルード時に定義されるオブジェクトやそのプロパティを一覧してみます。例えば firebug の DOM インスペクターでそれを確認することが出来ます。(左図参照)

左図はグローバルオブジェクトとして $ と jQuery が定義されていること、そして jQuery オブジェクトの64項目のプロパティ及びメソッドがあることを示すものです。なお、uiプロパティは jqueryui.js をインクルードしているために発生しているもので、jQuery.jsだけのインクルードの場合には生じません。

▲ToTop