jQuery源码分析(二)
2017-07-31 本文已影响74人
VisuperviReborn
1.如果还记的分析一中的返回一个对象,我直接贴了一句代码
return new jQuery.fn.init( selector, context );
好多不清楚为什么jQuery.fn.init返回的是jQuery对象呢我也研究了很久。
jQuery.fn = jQuery.prototype = {
jQuery.fn现在指向的是jQuery的原型
init.prototype = jQuery.fn;
init.prototype指向的是jQuery.fn
这个就讲得通了啊,返回的是init,而init的原型通过原型链指回jQuery的原型对象,所以返回的是一个对象,this指向的是这个新对象,这个新对象可以调用jQuery原型链上的所有方法。
2.jQuery.fn.extend()与jQuery.extend()
第一个是用来扩展对象方法的,也就是实例方法,调用的的时候$().foo()把对象挂载在jQuery的原型对象上
第二个是用来扩展静态方法的,也就是直接用jQuery.foo()来调用的。
这两个方法很有意思
看源码
jQuery.extend = jQuery.fn.extend = function() {
var src, copyIsArray, copy, name, options, clone,
这两个方法用了同一个方法体,如何实现不同的功能?这就要取决于强大的this了,jQuery.extend中的this指向的是jQuery对象jQuery.fn.extend指向的是fn,还记的1中的代码吗?jquer.fn=jQuery.prototype,所以this的指向不同。
3.回溯
先上三段代码开开胃
end: function() {
return this.prevObject || this.constructor();
},
// For internal use only.
// Behaves like an Array's method, not like a jQuery method.
push: push,
sort: deletedIds.sort,
splice: deletedIds.splice
};
pushStack: function( elems ) {
// Build a new jQuery matched element set
var ret = jQuery.merge( this.constructor(), elems );
// Add the old object onto the stack (as a reference)
ret.prevObject = this;
ret.context = this.context;
// Return the newly-formed element set
return ret;
},
merge: function( first, second ) {
var len = +second.length,
j = 0,
i = first.length;
while ( j < len ) {
first[ i++ ] = second[ j++ ];
}
// Support: IE<9
// Workaround casting of .length to NaN on otherwise arraylike objects (e.g., NodeLists)
if ( len !== len ) {
while ( second[ j ] !== undefined ) {
first[ i++ ] = second[ j++ ];
}
}
first.length = i;
return first;
},
结合这三段代码
首先end()返回的是this.prevObject,这个属性要结合pushStack这个函数,这里面给返回的新对象加了一个prevObject属性,该函数将一个 DOM 元素集合加入到 jQuery 内部管理的一个栈中,通过改变 jQuery 对象的 prevObject 属性来跟踪链式调用中前一个方法返回的 DOM 结果集合这个属性是包含上一步操作的集合。当调用end()方法的时候内部就返回当前 jQuery 对象的 prevObject 属性,完成回溯