jQueryインクルード時の挙動を追跡する ──jQuery解読(4)

• 「jQuery解読によるJavascript学習」関連エントリイ一覧 in this Blog

• 初稿：2007/10/29
• 改訂：2007/11/23……誤謬（returnの意味を誤解していた）修正

多忙故に投稿に間が空いてしまいましたが、jQuery解読によるJavascript学習を先に進めたいと思います。

まず、jQuery1.2.1.jsがインクルードされた時にどの様に振る舞うのか、解明したいと思います。

既に変数jQueryが定義されている場合の対応

13:// Map over jQuery in case of overwrite
14:if ( typeof jQuery != "undefined" )
15: var _jQuery = jQuery;

ここでは、既にjQueryが定義済みの場合に、そのjQueryを変数_jQueryに代入し、既存のjQueryをいわば待避しています。このコードにより既存のjQueryがこの後のコードによって上書きされても、無名関数の呼び出しが終わる迄の間は、既に存在していたjQueryを_jQueryに保存することが出来ます。

なお、このような待避の必要性、つまりjQueryのscriptコードが読み込まれた時点で、既に変数jQueryが存在しているケースはどの様な場合があるのか判然としません。

しかも、この変数 _jQuery は Call オブジェクトの変数であって、決してグローバル変数ではありませんから、インクルードが終われば消滅してしまいます。つまり待避させた_jQuery を利用しようとすれば jQuery.js 内にそれを利用するコードを加えなければなりません。

jQueryインスタンス生成のためのコード

その方法は1.2と1.2.1で全く異なっていますが、jQuery 関数が呼び出された時の this が jQuery のインスタンスでない場合にはそれを作成し、this がインスタンスであった場合には init() 関数を呼び出しています。但し、この jQuery インスタンスは jQuery インクルードに生成されるわけではありません。インクルード時には jQuery の定義文が解釈されるだけです。jQuery のインスタンスが生成されるのは、ユーザーによってjQuery(・・・)関数が呼び出された時です。

インクルード時には関数は解釈されるだけなので、ここでの主題からははずれますが、ここで、そのjQuery()呼び出し時の、1.2.1におけるインスタンスの作成方法のあらましを解読しておきます。

17:var jQuery = window.jQuery = function(selector, context) {
18:  // If the context is a namespace object, return a new object
19:  return this instanceof jQuery ?
20:      this.init(selector, context) :
21:      new jQuery(selector, context);
22:};

※　ここで使われている instanceof は、Javascript1.4以降で使用可能となった演算子で、「a instanceof A」の構文で、aがAのインスタンスであるかどうかを判定しています。

jQuery1.2迄は、this が window か、this.init が存在してない場合に、jQueryのインスタンスを生成し、そうでない場合には this.init() を呼び出してましたが、1.2.1による instanceof 演算子を使用する方法の方がスマートです。

このコードは次のことを行っています。

なお、このコードにおける「 return 値の連鎖 」の分析については、 Javascript基礎の基礎(1) return 値は「何に」返されるのか？──jQuery解読(16)をご覧ください。

1. まず無名関数の実行によって作成されるCallオブジェクトのプロパティとしてvar jQueryを定義しています。（line17）
2. 次に、window.jQuery を定義します（line:17）。つまりGlobal変数としてjQueryを定義します。そしてそれをCallオブジェクトのjQueryに代入しています（line:17）。
3. 次にこれらの変数に無名関数 function(selector, context) を代入します（line:17）。これは馴染みの表現で言えば、function jQuery (selector, context) を定義したことになります。
4. そしてその無名関数では2つのケース毎に異なる機能を実行します。
5. まず、this が jQuery のインスタンスだった場合には init() メソッドを呼び出し実行します（line:20）。いわゆる初期化を行う訳です。
6. また、もし this が jQuery のインスタンスでなければ、それを生成します（line:21）。インスタンスオブジェクトは空オブジェクトとして生成された後に、直ぐにjQuery(a,c)関数をコンストラクタ関数として呼び出すので、引き続いて init() メソッドが呼び出されます。

関数リテラルで表現されたこのコードは、インスタンス作成と作成されたインスタンスの初期化を一気に行っており、非常に合理的だと思います｡

既にグローバル変数 $ が存在する場合の対応

24:// Map over the $ in case of overwrite
25:if ( typeof $ != "undefined" )
26:　　var _$ = $;

$はprototype.jsなどでも使用されているGlobal変数ですから、jQuery.jsのインクルード時に既にそれが存在している可能性があります。そこでこのコードが必要となります。また当然jQuery()インスタンスの生成によっても定義されますから、直前のインスタンス生成による $ を待避することにもなります。

ここで重要なのは前者です。jQueryによる $ が他のフレームワーク等によって定義されたグローバル変数 $ を上書きしても支障がないように、_$ に既存の $ を待避させています。

但し、この変数 _$ は _jQuery同様にCall オブジェクトの変数であって、決してグローバル変数ではありませんから、インクルードが終われば消滅してしまいます。つまり待避させた_$を利用しようとすればjQuery.js内にそれを利用するコードを加えなければなりません。