JavaScript深度克隆实例讲解

浅克隆:被复制对象的所有变量都含有与原来的对象相同的值，而所有的对其他对象的引用仍然指向原来的对象。

深度克隆:复制对象的所有变量都含有与原来的对象相同的值，除去那些引用其他对象的变量。那些引用其他对象的变量将指向被复制过的新对象，而不再是原有的那些被引用的对象,也就与原来对象没有任何关联了。

深度克隆的关键是对引用值的处理。

我们可以把深度克隆分成4个部分

1：遍历被克隆对象的所有属性和方法

2：进行判断是否为引用值

3：判断是数组还是对象

4：递归调用克隆函数

那我们来解决这个四个部分就好了。

1：遍历对象很简单，直接for in 循环就好了。

2：判断是否为引用值只需要判断是否为对象，直接调用typeof就好了，不是object那么就是原始值或者null

3:判断是数组还是对象，有几种方法。点击打开链接

4：继续调用克隆函数就好了。

代码如下:

        var deepclone=(function () {
            var str='[obejct array]';
            return function(target,origin) {
                target=target||{};//防止传的不是对象，就换成对象。
                for (var key in origin) {
                    if (origin.hasownproperty(key)) {//不需要复制原型上面的
                        if (origin[key]!==null&&typeof(origin[key])==='object') {
                            if (object.prototype.tostring.call(origin[key])===str) {//是数组
                                target[key]=[];
                            }
                            else {
                                target[key]={};
                            }
                            deepclone(target[key],origin[key]);//递归调用
                        }
                        else target[key]=origin[key];
                    }
                }
            }
        }());

检验代码:

        var obj={
            name:'cyl',
            age:19,
            sex:'male',
            classmate: ['dpc','wdf','rj'],
            teacher: {
                name:'lsx',
                age:'50',
                sex:'male'
            }
        }
        var deepclone=(function () {
            var str='[obejct array]';
            return function(target,origin) {
                target=target||{};
                for (var key in origin) {
                    if (origin.hasownproperty(key)) {
                        if (origin[key]!==null&&typeof(origin[key])==='object') {
                            if (object.prototype.tostring.call(origin[key])===str) {
                                target[key]=[];
                            }
                            else {
                                target[key]={};
                            }
                            deepclone(target[key],origin[key]);
                        }
                        else target[key]=origin[key];
                    }
                }
            }
        }());
        var son={};
        deepclone(son,obj);

运行结果：

我们发现改变son对obj没有任何影响，深度克隆成功了。