美文网首页程序员我爱编程
jQuery源码分析(二)

jQuery源码分析(二)

作者: VisuperviReborn | 来源:发表于2017-07-31 17:30 被阅读74次

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

    相关文章

      网友评论

        本文标题:jQuery源码分析(二)

        本文链接:https://www.haomeiwen.com/subject/xbprlxtx.html