jQueryソース分析のjQuery.eq()とjQuery.get()メソッド比較

4001 ワード

まずテストコードをください.
<div id="test">
   <div id="child"></div>
</div>
JS部分:
//      :      ,  length            pushStack
//    []      ,      jQuery  !
//  :function(a,b){return new m.fn.init(a,b)}
//$("div").constructor.length       
alert("       :"+$("div").constructor);
//  [object HTMLDocument]
alert("      :"+$("child").context);
//    true,          contructor jQuery  
alert($("div").constructor() instanceof jQuery);
//merge        jQuery  ,   get             DOM
alert("merge      ->"+([$("div")[0]] instanceof jQuery))
//  false
//merge     DOM          jQuery   ,  jQuery    
var ret = jQuery.merge( $("div").constructor(), [$("div")[0]]);
alert("merge     ->"+(ret instanceof jQuery));
//  true,merge    jQuery   
//   undefined,      merge,    pushStack,       prevObject。  eq      pushStack   !
alert(" jQuery    jQuery"+(ret.prevObject));
//                   , $("p")     prevObject
//    true
alert("  eq    prevObject->"+($("div").eq(0).prevObject instanceof jQuery));
 
  
 

测试代码2:

//    “test”,      eq               ,    prevObject。    eq     prevObject       this,
//      jQuery  。$("div").eq(0).prevObject   $("div")
alert($("div").eq(0).prevObject.eq(0).attr("id"));

テストコード3:
alert($("p").eq(1).constructor);
 //   :function(a,b){return new m.fn.init(a,b)}

eqソース分析:
 eq: function( i ) {
var len = this.length,
j = +i + ( i < 0 ? len : 0 );//         !  +        !
//      [this[j]]=[DOM  ]=[$("p")[0]]
return this.pushStack( j >= 0 && j < len ? [ this[j] ] : [] );
}

eqメソッドはpushStackを呼び出すので、彼の戻り値タイプはjQueryタイプです.同時にpushStackでjQueryを呼び出す.mergeではここのDOM配列のすべてのオブジェクトを空のjQueryオブジェクトにカプセル化して返します!
pushStackソース:contextについてはcodeplayerを参照
 pushStack: function( elems ) {
// Build a new jQuery matched element set
//    jQuery    
var ret = jQuery.merge( this.constructor(), elems );
// Add the old object onto the stack (as a reference)
// prevObject        ,      eq   this  
ret.prevObject = this;
 //     ,   document
ret.context = this.context
//eq                  ,         DOM         JQuery       jQuery     !
// Return the newly-formed element set
return ret;
}

getメソッドソース:
get: function( num ) {
return num != null ?
// Return just the one element from the set
( num < 0 ? this[ num + this.length ] : this[ num ] ) :
//      , $("ul li").get()  ,  this   $("ul li")      jQuery  ,  slice       Array
// Return all the elements in a clean array
slice.call( this );
}

getメソッドを呼び出すときにパラメータが入力されない場合、[]が呼び出されるのを見る.slice.Callメソッドでクラス配列のjQueryオブジェクトをArrayタイプに変換しました!
テスト例:
//  false,get      DOM  
alert($("ul li").get() instanceof jQuery);
alert($("ul li").get());
//  [object HTMLLiElement],[object HTMLLiElement],[object HTMLLiElement]
//         ,   true
alert($("ul li").get() instanceof Array);
//get       ,this jQuery  ,          $("ul li")
//  slice    jQuery  $("ul li")   JS  .      true
alert(Array.prototype.slice.call($("ul li")) instanceof Array);
alert(Array.prototype.slice.call($("#me")) instanceof Array);
まとめ:
(1)ソースコード解析によりeq関数に伝達されるlengthが有効範囲内でない場合pushStackに伝達されるパラメータは[]つまり空のオブジェクトである!このとき返されるjQueryオブジェクトにはDOMオブジェクトは含まれません!(2)var ret = jQuery.merge( $("div").constructor(), [$("div")[0]]); 後ろの配列の中のオブジェクトをすべて前の空のjQueryオブジェクトの上にカプセル化して、新しいjQueryオブジェクトを構成することができます!
(3)getメソッドには下付きでアクセスし,入力パラメータがなければsliceによって呼び出しオブジェクト全体のDOM集合を返し,そうでなければ特定の項目を返す.負数であればeqもgetも同じで、呼び出しオブジェクトの長さを加えることで!