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も同じで、呼び出しオブジェクトの長さを加えることで!