jQuery() の挙動を解読する(7) jQuery().find()メソッド解読(start)──jQuery解読(11)

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

• 初稿：2007/11/14
• 改訂：2008/02/03……抜本改訂

jQuery().find() が登場する箇所

jQuery().find() メソッドはjQuery()関数の初期化メソッドである init() メソッド内に２箇所登場します。

init() メソッドとその中の find() メソッドのコード表示/隠蔽

29: // A simple way to check for HTML strings or ID strings
30: // (both of which we optimize for)
31: var quickExpr = /^[^<]*(<(.|\s)+>)[^>]*$|^#(\w+)$/;
32: 
33: // Is it a simple selector
34: var isSimple = /^.[^:#\[\.]*$/;
35:
36: jQuery.fn = jQuery.prototype = {
37: 　init: function( selector, context ) {
38: 　// Make sure that a selection was provided
39: 　selector = selector || document;
40:
41: 　// Handle $(DOMElement)
42: 　if ( selector.nodeType ) {
43: 　　this[0] = selector;
44: 　　this.length = 1;
45: 　　return this;
46:
47: 　// Handle HTML strings
48: 　} else if ( typeof selector == "string" ) {
49: 　　// Are we dealing with HTML string or an ID?
50: 　　var match = quickExpr.exec( selector );
51:
52: 　　// Verify a match, and that no context was specified for #id
53: 　　if ( match && (match[1] || !context) ) {
54:
55: 　　　// HANDLE: $(html) -> $(array)
56: 　　　if ( match[1] )
57: 　　　　selector = jQuery.clean( [ match[1] ], context );
58:
59: 　　　// HANDLE: $("#id")
60: 　　　else {
61: 　　　　var elem = document.getElementById( match[3] );
62:
63: 　　　　// Make sure an element was located
64: 　　　　if ( elem )
65: 　　　　　// Handle the case where IE and Opera return items
66: 　　　　　// by name instead of ID
67: 　　　　　if ( elem.id != match[3] )
68: 　　　　　　return  jQuery().find( selector );
69:
70: 　　　　　// Otherwise, we inject the element directly into the jQuery object
71: 　　　　　else {
72: 　　　　　　this[0] = elem;
73: 　　　　　　this.length = 1;
74: 　　　　　　return this;
75: 　　　　　}
76:
77: 　　　　else
78: 　　　　　selector = [];
79: 　　　}
80:
81: 　　// HANDLE: $(expr, [context])
82: 　　// (which is just equivalent to: $(content).find(expr)
83: 　　} else
84: 　　　return  new jQuery( context ).find( selector ) ;
85:
86: 　// HANDLE: $(function)
87: 　// Shortcut for document ready
88: 　} else if ( jQuery.isFunction( selector ) )
89: 　　return new jQuery( document )[ jQuery.fn.ready ? "ready" : "load" ]( selector );
90:
91: 　return this.setArray(
92: 　　// HANDLE: $(array)
93: 　　selector.constructor == Array && selector ||
94:
95: 　　// HANDLE: $(arraylike)
96: 　　// Watch for when an array-like object, contains DOM nodes, is passed in as the selector
97: 　　(selector.jquery || selector.length && selector != window && !selector.nodeType && selector[0] != undefined && selector[0].nodeType) && jQuery.makeArray( selector ) ||
98:
99: 　// HANDLE: $(*)
100:  [ selector ] );
101: },

第一は 53: if ( match && (match[1] || !context) ) の時、つまり、

1. (1)selector が文字列型で（48行）、
2. (2)31行で定義された quiclExpr にマッチし、
3. かつ (3)m[1] が存在し、
4. 更に(4)context が付与されていない場合において、
5. (5)selector 文字列が "#id" の形式の場合に、

jQuery().find( selector ) として登場します。（68行）

第二は文字列 selector が "･･<･･･>･･" でもなく、また "#id" でもない場合の new jQuery(context).find(selector) です（84行）。

どちらにも共通していることは、jQuery() 関数を再帰呼び出しすることであり、異なる点は new 演算子の有無です。どちらの場合においても jQuery 関数を再帰呼び出しするのですから、その定義から新しいインスタンスが作成されることに相違はありません。では何故 new 演算子の有無の別があるのか、興味深いところですが解明できていません。

new 演算子が有る jQuery 再帰呼び出しの場合には、二重に new 演算子が作用してしまうのではないかと考えますが、本当にそうなるのか、またその作用の意味は何か、解明できていません。

init() メソッドから呼び出される jQuery(context).find(selector) はどう動くのか

init() から呼び出される jQuery(context).find(selector) インスタンスメソッドは次のようになっています。

jQuery(context).find(selector) コードの表示/隠蔽

284: find: function( selector ) {
285: 　var elems = jQuery.map(this, function(elem){
286: 　　return jQuery.find( selector, elem );
287: 　});
288:
289: 　return this.pushStack( /[^+>] [^+>]/.test( selector ) || selector.indexOf("..") > -1 ?
290: 　　jQuery.unique( elems ) :
291: 　　elems );
292: },

再帰呼び出しされる前者の jQuery().find("#id") では、DOM ツリー全体を対象として find("#id") メソッドが実行され、後者では新たなインスタンスを生成した上で context（ context が与えられていなければ document 全体）を対象として find( selector ) インスタンスメソッドが実行されます。以下にその挙動の概要をまとめますが、find( selector ) インスタンスメソッドから呼び出される jQuery.find( selector, context )クラスメソッドの挙動の仕組みは別途解明することとし、それに先立ちこのクラスメソッドを利用する jQuery(context).find(selector) インスタンスメソッドの挙動を概観しておきます。

1. jQuery(context).find(selector) インスタンスメソッドの挙動概観

1. jQuery.map(this,fn(elem){}) メソッド起動
2. context 内の各々の要素 elem を対象として jQuery.find( selector, elem ) 実行
3. そのリターン値を elems に代入
4. 次に selector 文字列に対して、(1) "a b"（ ＋ でもなく＞でもない a 及び b （共に１文字）の間にスペースがある文字列）があるかどうか、あるいは、(2) ".." を含む文字列かどうかをチェック
5. この検証にヒットすれば jQuery.unique( elems ) を起動してその結果を返す。
6. ヒットしなければ elems を返す。

こうして context 内の selector に適合する要素が jQuery.find( selector, context ) クラスメソッドによって抽出され、これが jQuery( context ).find( selector ) に return されます。

2. $("#id") → $().find("#id") 呼び出しの場合の挙動

1. new 演算子がない $().find("#id") が呼び出されると、$() 呼び出しによって直ぐに 19 行で新たなインスタンスが生成され init() が起動されます。すると $ に引数はありませんから、init() 関数の第一引数には document が代入され、インスタンスは 45 行から [document] となりこれが 19 行から $() に return されます。
2. 次に、$().find("#id") つまり [document].find("#id") メソッドから呼び出される 285 行の map() メソッドにおいて、this は [document] を指し示し、第二引数の elem は map() メソッドの定義から document 内の個々の要素エレメントを意味します。こうして document 内の各要素に対して 286 行のクラスメソッド $.find( selector, elem ) が適用されます。ここで第一引数には当然 "#id" が渡されます。つまり、
   var elems = jQuery.map([document], function(elem){ return jQuery.find("#id", elem) })
   です。
3. elems 取得後には、 "#id" 文字列に対して、(1) "a b"（ a も b も ＋ でもなく＞でもない１文字で間にスペースがある文字列 ）があるかどうか、あるいは(2) ".." を含む文字列かどうかがチェックされます。
4. この検証にヒットすれば jQuery.unique( elems ) を起動してその結果が返されますが、 "#id" 文字列の場合その内容からこの検証にはヒットしません。
5. こうして "#id" に適合する要素 elems が jQuery.find( "#id", [document][i] ) クラスメソッドによって抽出され、これが $().find("#id") に return され、更に $("id") に返されて目的が達成されます。

3. new jQuery(context).find(selector) 呼び出しの場合の挙動

これについては既に 1. で述べたことと全く同一になるので省略します。

次のエントリイでは...

jQuery.find() クラスメソッドを解読します｡