深拷贝

[libin1991]

克隆（也就是拷贝）是javascript中很重要也很常见的问题。克隆就是将一个对象里的属性、方法等复制到另一个对象中，且互不影响（即克隆之后，对一个对象进行改动，不会影响到另一对象）。我们今天就来讨论一下原生js中克隆的问题。

action~

现在有一个对象

var obj = {

    name: '隔壁老王',
    age: 60,
    sex: 'male'

}

我们现在想把obj里的每一个属性拷贝到一个空对象var obj1 = {}中，那么需要写一个克隆方法，首先遍历一下obj对象，然后把里面的每一个属性都拷贝过去。代码如下：

var obj = {

    name: '隔壁老王',
    age: 60,
    sex: 'male'

};

var obj1 = {};

function clone(origin, target) {
    for (var prop in origin) {
        target[prop] = origin[prop];
    }
};

clone(obj, obj1);

在控制台中查看obj1，会发现实现了对obj的拷贝。

我们再对这个方法进行一些完善：有可能用户在执行clone方法时，只传origin一个参数，然后将函数执行结果赋给对象obj1，所以我们需要在方法最下方加一个返回值target，返回克隆结果，相应的也要在函数体里声明var target = {};。

还有一种情况obj1对象里事先有其他属性，那么函数体里写var target = {};显然是不符合预期的，所以要完善成var target = target || {};确保万无一失。最终该方法完善为：

function clone(origin, target) {
    var target = target || {};
    for (var prop in origin) {
        target[prop] = origin[prop];
    }
    return target;
}

下面对obj进行拷贝，且obj1本身有自己的属性，执行代码如下：

var obj = {

    name: '隔壁老王',
    age: 60,
    sex: 'male'

};

var obj1 = {

    father: '老王'

};

function clone(origin, target) {
    var target = target || {};
    for (var prop in origin) {
        target[prop] = origin[prop];
    }
    return target;
}

clone(obj, obj1);

查看一下拷贝结果

完美拷贝了obj的所有属性，又保留了自身属性。

到这就结束了么？要知道js有六大数据类型（本文不讨论ES6新增的Symbol类型）：number，string，boolean，undefined，null，object。

其中number，string，boolean，undefined，null归为原始值一类，而object属于引用值，具体包括狭义的object，array，function。

下面往obj对象里加点引用值，用我们已经写出来的克隆方法试试：

var obj = {

    name: '隔壁老王',
    age: 60,
    sex: 'male',
    card: ['信用卡', '借记卡', '理发卡'],
    wife: {

        name: '小刘'

    },
    divorce: function () { }

};

var obj1 = {

    father: '老王'

};

function clone(origin, target) {
    var target = target || {};
    for (var prop in origin) {
        target[prop] = origin[prop];
    }
    return target;
}

clone(obj, obj1);

貌似拷贝成功了

当我们对obj对象进行一波这样的操作：

再查看obj1会发现

在obj1里也多了美容卡和一个儿子，函数没受影响。

我们可以得出这样的结论：对于数组和对象，用上面那种克隆方法是不行的。因为对于数组和对象而言，拷贝的是地址，他们指向的都是同一个空间，通过一个对象在这个空间里面加了东西，另一个对象必然也会受到影响。

而对于函数而言，通过上面这种普通的赋值拷贝，就可以实现，且互不影响，因为函数的克隆会在内存中单独开辟一块空间。

我们管上面写的这种克隆方法叫浅度克隆，它可应用于不包含对象（狭义的）和数组的对象之间的拷贝。有点绕哈~

---

下面我们来解决一下狭义的对象和数组的拷贝问题，即我们需要另一种万全之策——深度克隆。

先来整理下思路：

1.遍历待拷贝的对象； 2.判断每个元素是不是原始值，若是，则通过浅度克隆的手段进行拷贝； 3.若是引用值，则需要继续判断是对象还是数组； 4.再分别建立空数组或对象用来盛放里面即将拷贝而来的属性值； 5.数组和对象里面的若是原始值，则浅拷贝即可实现，若还有引用值，则还需要重复进行上述一系列的判断。

上述每一步思路怎么用代码实现呢：

1.使用for in进行遍历。但需要注意的是，for in方法会把对象原型里的属性也一起遍历了，所以要与hasOwnProperty()方法进行联用，hasOwnProperty()方法可以判断某属性是不是该对象自己的属性，从而过滤掉原型中的属性。 2.用typeof()返回值来进行判断，数组和对象的typeof返回值是'object'。 3.判断对象还是数组有多种方法，举出常见的三种：分别是constructor、instanceof和toString()方法。这里最好用toString()方法，因为在有父子域之间拷贝的情况，constructor和instanceof这两种是不好用的。 4.就是[]和{}呗。 5.重复判断，自然想到递归。

深度克隆方法如下：

function deepClone(origin, target) {
    var target = target || {},
        toStr = Object.prototype.toString,
        arrStr = '[object Array]';
    for (var prop in origin) {
        if (origin.hasOwnProperty(prop)) {
            if (typeof (origin[prop]) == 'object' && origin[prop] !== null) {
                if (toStr.call(origin[prop]) == arrStr) {
                    target[prop] = [];
                } else {
                    target[prop] = {};
                }
                deepClone(origin[prop], target[prop]);
            } else {
                target[prop] = origin[prop];
            }
        }
    }
    return target;
}

注意到origin[prop] !== null这句了么？为啥要加上它，因为typeof(null)也是'object'。

来试试吧，我们把obj变得复杂一点，给隔壁老王的老婆增加俩儿子：王小宝和王二宝。执行过程如下：

var obj = {
            name: '隔壁老王',
            age: 60,
            sex: 'male',
            card: ['信用卡', '借记卡', '理发卡'],
            wife: {
                name: '小刘',
                son: {
                    name1: '王小宝',
                    name2: '王二宝'
                }
            },
            divorce: function () { }
        };

        var obj1 = {

            father: "老王"

        };

        function deepClone(origin, target) {
            var target = target || {},
                toStr = Object.prototype.toString,
                arrStr = '[object Array]';
            for (var prop in origin) {
                if (origin.hasOwnProperty(prop)) {
                    if (typeof (origin[prop]) == 'object' && origin[prop] !== null) {
                        target[prop] = (toStr.call(origin[prop]) == arrStr) ? [] : {};
                        deepClone(origin[prop], target[prop]);
                    } else {
                        target[prop] = origin[prop];
                    }
                }
            }
            return target;
        }

        deepClone(obj, obj1);

看看结果，没毛病。

对obj的引用值增加一些属性试试。

发现obj1纹丝不动，完美拷贝实现！

---

综上，克隆方法白话完了，实战开发中针对实际需要采取不同的克隆手段。