JavaScript 深拷贝和浅拷贝

Question

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

现在有一个对象

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);

貌似拷贝成功了。

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

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

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

---

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

先来整理下思路：

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);

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