javascript 生深拷貝

方法一：使用 JSON.parse() 方法

要實現深拷貝有很多辦法，比如最簡單的辦法是使用 JSON.parse()：

function deepClone(initalObj) { var obj = {}; try { obj = JSON.parse(JSON.stringify(initalObj)); } return obj; }

/* ================ 客戶端呼叫 ================ */ var obj = { a: { a: "world", b: 21 } } var cloneObj = deepClone(obj); cloneObj.a.a = "changed";

console.log(obj.a.a); // "world"

2.2 方法二：遞迴拷貝

/* ================ 深拷貝 ================ */ function deepClone(initalObj, finalObj) { var obj = finalObj || {}; for (var i in initalObj) { if (typeof initalObj[i] === 'object') { obj[i] = (initalObj[i].constructor === Array) ? [] : {}; arguments.callee(initalObj[i], obj[i]); } else { obj[i] = initalObj[i]; } } return obj; } 上述程式碼確實可以實現深拷貝。但是當遇到兩個互相引用的物件，會出現死迴圈的情況。

為了避免相互引用的物件導致死迴圈的情況，則應該在遍歷的時候判斷是否相互引用物件，如果是則退出迴圈。

改進版程式碼如下：

/* ================ 深拷貝 ================ */ function deepClone(initalObj, finalObj) { var obj = finalObj || {}; for (var i in initalObj) { var prop = initalObj[i];

    // 避免相互引用物件導致死迴圈，如initalObj.a = initalObj的情況
    if(prop === obj) {
        continue;
    }

    if (typeof prop === 'object') {
        obj[i] = (prop.constructor === Array) ? [] : {};
        arguments.callee(prop, obj[i]);
    } else {
        obj[i] = prop;
    }
}
return obj;
複製程式碼

}

2.3 方法三：使用Object.create()方法

直接使用var newObj = Object.create(oldObj)，可以達到深拷貝的效果。 /* ================ 深拷貝 ================ */ function deepClone(initalObj, finalObj) { var obj = finalObj || {}; for (var i in initalObj) { var prop = initalObj[i];

    // 避免相互引用物件導致死迴圈，如initalObj.a = initalObj的情況
    if(prop === obj) {
        continue;
    }

    if (typeof prop === 'object') {
        obj[i] = (prop.constructor === Array) ? [] : Object.create(prop);
    } else {
        obj[i] = prop;
    }
}
return obj;
複製程式碼

}

jQuery.js的jQuery.extend()也實現了物件的深拷貝。下面將官方程式碼貼出來，以供參考

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 = jQuery.isArray( copy ) ) ) ) {

                if ( copyIsArray ) {
                    copyIsArray = false;
                    clone = src && jQuery.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;
複製程式碼

};