容易忽略的坑——对象的深拷贝

Posted 2020-08-06

之前看到一个对象拷贝的问题，没仔细想就写出来了这个代码：

function copy(obj)
{
    var result = {};
    for(var key in obj){
　　　　 //判断是否自己的项
        if(obj.hasOwnProperty(key)) {
            result[key] = obj[key];
        }
    }
    return result;
}

今天偶然才发现这是个坑，如果是一般的对象例如：

var obj1 = {
    name:"bing",
    age:20,
    sayName : function(){
        console.log(this.name);
    }
}
完全没有问题。但是如果碰到下面这种情况就有大问题了：

var obj1 = {
    name:"bing",
    age:20,
    obj:{
        add : "bei"
    },
    arr:[1,2,3],
    sayName : function(){
        console.log(this.name);
    }
}

这个对象是比上个对象多了两个参数，一个obj对象类型，一个arr数组类型，然后尝试修改这两项的值会发现复制不好使了：

var obj2 = copy(obj1);
obj2.arr[1] = "123";
console.log(obj1.arr[1]); //123
console.log(obj2.arr[1]); //123

修改一个对应的值另一个也会改变，原因在于copy函数加粗的这个赋值，它只是一个浅拷贝，传的是这两项的引用。所以正确做法应该是深层次的递归拷贝：

function deepCopy(obj)
{
    if(obj instanceof Array){
        var result = [];
    }else if(obj instanceof Object){
        var result = {};
    }else{
        return obj;
    }
    for(var key in obj){
        if(obj.hasOwnProperty(key)) {
            var value = obj[key];
            if (value instanceof Object) {
                result[key] = arguments.callee(value);
            } else {
                result[key] = value;
            }
        }
    }
    return result;
}
这次就好了：

var obj2 = deepCopy(obj1);
obj2.arr[1] = "123";
console.log(obj1.arr[1]); //2
console.log(obj2.arr[1]); //123

通过加粗语句来递归复制，以保证能够每一项内部元素都能够被复制到。

写此文章引以为戒，希望别人别再栽进这个坑里面了。

第一次写博客，好多不懂的地方，原来都是看各位大神的博客，把自己感觉重要的博客收藏或者把自己认为重要的知识点记到word中排版整理好，但是现在有一种闭门造车的感觉，认识到自己的学习方法需要改进以后会把自己遇到的问题和心得写出来，如果有问题欢迎各路大牛拍砖。