1. 程式人生 > >物件深淺拷貝

物件深淺拷貝

先看一下下面的例子:

var arr1 = [1,2,3];
var arr2 = arr1;
arr2.push(4);
console.log(arr1);//[1,2,3,4]

明明是對arr2做了處理,為什麼arr1也會跟著變呢。這是因為物件都是存在記憶體地址中的,雖然表面看著是複製了一個新的物件出來,實質上兩者指向的還是同一個地址。操作的時候改的是地址中的資料,所以引用同一地址的資料都會跟著改變,上述的拷貝我們把它稱之為淺拷貝
有些時候我們想在拷貝的時候同事改變物件的記憶體地址,就需要用到深拷貝。不僅將原物件的各個屬性逐個複製出去,同時將原物件各個屬性所包含的物件也依次採用深拷貝的方法遞迴複製到新物件上,從而形成一個完全新的物件。

function deepClone(values) {
    var copy;
    // 處理null或undefined
    if (null == values || "object" != typeof values) return values;
    // 處理日期物件
    if (values instanceof Date) {
        copy = new Date();
        copy.setTime(values.getTime());
        return copy;
    }
    // 處理陣列
    if (values instanceof Array) {
        copy = [];
        for (var i = 0, len = values.length; i < len; i++) {
            copy[i] = deepClone(values[i]);
        }
        return copy;
    }
    // 處理物件
    if (values instanceof Object) {
        copy = {};
        for (var attr in values) {
            if (values.hasOwnProperty(attr)) copy[attr] = deepClone(values[attr]);
        }
        return copy;
    }
    throw new Error ("Unable to copy values! Its type isn't supported.");
}
var obj = {
	'name' : 'xiaohong',
	'age' : '23'
}
var obj1 = deepClone(obj);
obj1.name = 'star';
console.log(obj.name);//xiaohong
console.log(obj1.name);//star