jQuery()の挙動を解読する。(12) pushStack()解読──jQuery解読(21)

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

pushStack()再考

以前こちら（ 簡単なインスタンスメソッドいくつか──jQuery解読(19) ）で pushStack() について次のように触れました。

この pushStack() は大変興味深いメソッドです。新しいインスタンスオブジェクトの その名も prevObject プロパティに、直前の this が指し示すオブジェクトが格納されるようにコーディングされています。このメソッドは jQuery.js で７箇所利用されています。

このことの意味をもう少し掘り下げてみたいと思います。この pushStack() メソッドはどの様な場合に利用するのか、と言う点を明らかにしたいのです。そうしないとこのメソッドを本当に分かったことにはならないと思うからです。

jQuery(obj) 再登場

改めて pushStack() メソッドのコードを見てみます。

102: pushStack: function(a) {　//所与の第一引数を受け取り、
103: 　var ret = jQuery(a); //それを第一引数とするjQuery(a)を起動して
    　　　　　　//新規 InsObj を作成し、それを ret 変数に代入する。
104: 　ret.prevObject = this;　//その時の this を
　　　　　　　　//retのプロパティに代入し、thisの内容 をプロパティ
105: 　return ret;　//として持つ新規 InsObj を呼出し元に返す。
106: },

jQuery(obj) というコードによって そのインスタンスにobj が代入されることは以前に触れました。（ this 活用──jQuery解読(17) ） このコードが pushStack() で利用されています。（103行）

ここで注目するのは引数の a です。具体例で見てみます。

225: find: function(t) {
226: 　var data = jQuery.map(this, function(a){ return jQuery.find(t,a); });
227: 　　return this.pushStack( /[^+>] [^+>]/.test( t ) || t.indexOf("..") > -1 ?
228: 　　　jQuery.unique( data ) : data );
229: },

例えば、上の find() インスタンスメソッドを見てみると、最初の this は、find() が呼び出される経緯から、インスタンスオブジェクトを指しています。そして、ユーザーによって context が指定されていなければ、この場合のインスタンスオブジェクトにはドキュメントノードが代入されています。何故ならば、この find() メソッドの呼び出し元は new jQuery(context) であり、このインスタンスには、ユーザーが context を指定しない場合には document が代入されるからです。（ init()メソッドでそう定義されています。 ）

ところで、jQueryクラスメソッドである map() メソッドが起動されると this はクラス、つまり jQuery() 関数を指しますが、その実行が終わって data に結果を代入したその後に this.pushStack(data) メソッドが起動されるときには、ここの this も find() メソッド内にありますから、その関数の起動元であるインスタンスオブジェクトに格納されているドキュメントノードを指すことになります。

さてコードの目的に戻ると、data に格納されているノードオブジェクトをインスタンスに返すためにコードが書かれています。そこで jQuery(data) を実行させて変数 ret に目的とするノードオブジェクトを代入し（102行）、そのプロパティである preObject に、この pushStack() メソッドを起動させたときのインスタンスオブジェクト＝this であるドキュメントノードを代入した上で（104行）、ret がインスタンスに返され、最終的にユーザーが入力した jQuery(a,c) に返されます。こうして selector で指定した要素ノードの配列が取得出来るわけです。

▲ToTop

pushStack()は new jQuery(context).find(selector) 起動時において、目的の要素ノードを確実に取得するために機能している

new jQuery(context).find(selector) が起動すると、ユーザーが目的とする要素名などは find(selector) としてその引数となると共に、このコンストラクタが生成するインスタンスには context が代入されます。

そもそも jQuery.js はインスタンスの内容を return させながら、最終的にユーザーが入力した jQuery(selector,context).method(・・) にその内容を返していくように設計されています。

だから、return されるインスタンスには context ではなく、selector による結果が入っていなければなりません。そこでここで取り上げたjQuery().pushStack() メソッドによって、インスタンスの内容を context から selector に入れ替えることになります。

▲ToTop

以上の解読を行った際の検討過程を以下に示します。

下図は次のような過程を FireBug で追跡し、pushStack()メソッドを今まさに終わらんとしている段階でのスナップショットです。

$tmp=$("p")[0]を実行し
→　int("p")　→ 65 return new jQuery().find( "p" );　→　find()メソッドに入り、
　226 var data = jQuery.map(this, function(a){ return jQuery.find(t,a); });
を経て↓
　227 return this.pushStack( /[^+>] [^+>]/.test( t ) || t.indexOf("..") > -1 ?
　228 jQuery.unique( data ) : data );

と辿り、pushStack()メソッドに入った後の最終段階での一こまです。

this がドキュメントノードになっていること、変数 ret にp要素ノードのリストが１つの配列として格納されていること、及び ret.prevObject にドキュメントノードが代入されていること等が分かります。