jQuery對象擴展方法(Extend)深度解析

1、這幾天在寫自己的Js工具類庫,所以在編寫對象擴展方法,參考了jQuery的對象擴展方法,在編寫該方法前,需要掌握js深拷貝和淺拷貝的相關知識,下面是jQuery3.2.1版本對象擴展方法的源碼:

jQuery.extend = jQuery.fn.extend = function() {
    var options, name, src, copy, copyIsArray, clone,
        target = arguments[ 0 ] || {},
        i = 1,
        length = arguments.length,
        deep = false;

    // Handle a deep copy situation
    if ( typeof target === "boolean" ) {
        deep = target;

        // Skip the boolean and the target
        target = arguments[ i ] || {};
        i++;
    }

    // Handle case when target is a string or something (possible in deep copy)
    if ( typeof target !== "object" && !jQuery.isFunction( target ) ) {
        target = {};
    }

    // Extend jQuery itself if only one argument is passed
    if ( i === length ) {
        target = this;
        i--;
    }

    for ( ; i < length; i++ ) {

        // Only deal with non-null/undefined values
        if ( ( options = arguments[ i ] ) != null ) {

            // Extend the base object
            for ( name in options ) {
                src = target[ name ];
                copy = options[ name ];

                // Prevent never-ending loop
                if ( target === copy ) {
                    continue;
                }

                // Recurse if we're merging plain objects or arrays
                if ( deep && copy && ( jQuery.isPlainObject( copy ) ||
                    ( copyIsArray = Array.isArray( copy ) ) ) ) {

                    if ( copyIsArray ) {
                        copyIsArray = false;
                        clone = src && Array.isArray( src ) ? src : [];

                    } else {
                        clone = src && jQuery.isPlainObject( src ) ? src : {};
                    }

                    // Never move original objects, clone them
                    target[ name ] = jQuery.extend( deep, clone, copy );

                // Don't bring in undefined values
                } else if ( copy !== undefined ) {
                    target[ name ] = copy;
                }
            }
        }
    }

    // Return the modified object
    return target;
};

下面是我的解釋代碼:

zcHtmlHelper.extend=zcHtmlHelper.fn.extend=function(){
    var target=arguments[0]||{},//第一個參數
        deep = false,//是否開啟深拷貝功能,默認不是
        i=1,
        length=arguments.length,
        options,
        name,
        src,
        copy,
        copyIsArray,
        clone;

    //處理深拷貝場景
    if(typeof target==="boolean"){
        deep=true;
        target=arguments[i] || {};//將緊隨其后的存放拷貝值的集合
        i++;//加1的原因是,一旦開啟深拷貝功能,那么傳入的參數就至少有兩個,一個是深拷貝的開關另一個是擴展參數,否則當只傳如一個深拷貝的開關,那么方法將返回空集合
    }

    if(typeof target!=="object"){
        target = {};
    }

    //這個判斷有兩種情況
    //1、當傳入的參數只有一個(不能是true或者false),那么就擴展當前命名空間
    //2、當傳入的參數有個兩個,分別是深拷貝的開關(true或者false)和擴展參數,那么就擴展當前命名空間
    if(i==length){
        target=this;
        i--;
    }
    for(;i<length;i++){
        //只處理非空和非null的值
        if((options=arguments[i])!=null){
            for(name in options){
                src=target[name];//判斷傳入的參數(存放拷貝值的集合)
                copy=options[name];

                //當嵌套數組或者對象深拷貝完畢,跳出當前屬性,開始拷貝下一屬性
                if ( target === copy ) {
                    continue;
                }

                //如果傳入的合並對象里面嵌套數組或者對象,那么遞歸擴展對象
                if(deep && copy && (zcHtmlHelper.isPlainObject(copy) || (copyIsArray = Array.isArray(copy))))
                {
                    if ( copyIsArray ) {
                        copyIsArray = false;
                        clone = src && Array.isArray( src ) ? src : [];
                    }
                    else {
                        clone = src && zcHtmlHelper.isPlainObject( src ) ? src : {};
                    }
                    target[ name ] = zcHtmlHelper.extend( deep, clone, copy );
                }
                else if(copy!=undefined)
                {
                    target[name]=copy;//覆蓋添加
                }
            }
        }
    }
    return target;
}

 

2、代碼驗證

(1)、淺拷貝代碼:

var names=[1,3,4,5,6];
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { names: names};
var settings = zcHtmlHelper.extend(false,defaults,options);
alert(names==settings.names);

首先對象拷貝成功,settings是兩個對象的合集,但是name數組對象和settings.name屬性是同一個引用,所以,這是前拷貝

 

(2)、深拷貝代碼:

var names=[1,3,4,5,6];
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { names: names};
var settings = zcHtmlHelper.extend(true,defaults,options);
alert(names==settings.names);
console.log(settings);