Query继承的实现（extends）

Query继承的实现（extends）

jQuery中的extend方法通过不同的参数实现了几种不同的继承方法：

• 1.extend(src) 

    将src对象的属性和方法逐一复制给jQuery或jQuery对象 

• 2.extend(dest,src1,src2,src3...srcN) 

    将 src1、 src2...对象的属性和方法逐一复制给dest对象，需要注意的是，在复制的过程中，排在后面的参数（对象）将会覆盖排在前面的参数的属性 和方法； 实际上，该方法和后面的方法3都提供了一种“深度继承”的方法，即：参数一表示的对象可以通过该方法一次实现逐一按层次的父类继承。  
如下图所示：  
srcN  
...  
src3  
src2  
src1  
dest  
    使用该方法，可以一次将”继承“dest的多个父类，需要注意的是src3提供的属性和方法由可能会被src2,src1重载。 

• 3.extend(boolean,dest,src1,src2...) 

与 其 他的类库不同的是，jQuery的extend方法提供了“深层拷贝”的功能，如果你传入的第一个参数为boolean型变量，则该变量为深层拷贝的 标 志，第二个参数为extend方法的目标对象，其余参数为需要进行继承的“父类”。如果第一个参数的值为true（深层拷贝），并且dest和src 元素 都包括相同名称的对象属性，则对该对象属性的方法和属性再进行一次复制。

• 最后我们来通过分析源代码，来加深对该继承机制的理解：

jQuery.extend = jQuery.fn.extend = function() {
    // copy reference to target object
    var target = arguments[0] || {}, i = 1, length = arguments.length, deep = false, options;

    // Handle a deep copy situation  /*如果第一个参数为boolean值，则取第二个参数为目标对象*/ 
    if ( target.constructor == Boolean ) {
        deep = target;
        target = arguments[1] || {};
        // skip the boolean and the target
        i = 2;
    }

    // Handle case when target is a string or something (possible in deep copy)
    /*如果目标参数不是object或者function，那么就有可能是深度copy,*/ 
    if ( typeof target != "object" && typeof target != "function" )
        target = {};

    // extend jQuery itself if only one argument is passed /*如果参数长度为1，则将参数表示的对象的属性和方法复  制给jQuery本身*/ 
    if ( length == i ) {
        target = this;
        --i;
    }

    for ( ; i < length; i++ )
        // Only deal with non-null/undefined values当参数都为非空时， 
        if ( (options = arguments[ i ]) != null )
            // Extend the base object
            for ( var name in options ) {
                var src = target[ name ], copy = options[ name ];

                // Prevent never-ending loop /*防止死循环*/ 
                if ( target === copy )
                    continue;

                // Recurse if we're merging object values/*深度继承的实现*/ 
                if ( deep && copy && typeof copy == "object" && !copy.nodeType )
                    target[ name ] = jQuery.extend( deep, 
                        // Never move original objects, clone them
                        src || ( copy.length != null ? [ ] : { } )
                    , copy );

                // Don't bring in undefined values  /*正常情况下的继承实现*/ 
                else if ( copy !== undefined )
                    target[ name ] = copy;

            }

    // Return the modified object
    return target;
};

• 注意：

在 这里还有一个特殊的地方，就是在函数开头的地方有jQuery.extend = jQuery.fn.extend，而在程序的前面已经将 jQuery.prototype赋值给jQuery.fn了，所以在后面的调用中会出现jQuery.extend()和 jQuery.fn.extend()的不同调用，这两个方法调用产生的结果也不一样，jQuery.extend()的调用并不会把方法扩展到对象的实 例上，引用它的方法也需要通过jQuery类来实现，如jQuery.init()，而jQuery.fn.extend()的调用把方法扩展到了对象的 prototype上，所以实例化一个jQuery对象的时候，它就具有了这些方法，这是很重要的，在jQuery.js中到处体现这一点