程序员我爱编程

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 属性,完成回溯

上一篇下一篇

猜你喜欢

热点阅读