看看你知道的“浅拷贝”是对的吗

关于本篇文章的起源是一位大佬在面试的时候，询问应聘者关于浅拷贝的知识后，在应聘者的回答中，笔者发现有好一部分人对浅拷贝都是错误的，故有了此篇内容。

1. 还原现场

大佬：“如何复制一个对象？”

她： “复制对象有深拷贝和浅拷贝...”

大佬：”说一下这两者之间的区别“

她： ”我给你写一段浅拷贝的代码“

var a = { x: 1 };
var b = a;

大佬：”回去等通知吧 ~.~“

2. 一探究竟

刚开始看到上面应聘者的例子的时候，其实我也认为应聘者写的是对的，因为在我的记忆里，对象的浅拷贝就是两个变量存储的值是相同的堆地址，而上面应聘者写的 a 和 b 符合这个条件，但是大佬提出异议后，便立刻去 google 了一把，发现 Javascript 的浅拷贝居然没有官方定义（有人找到的话麻烦评论区贴一个地址，非常感谢）。

于是我去MDN（https://developer.mozilla.org）上查了一下 shallow copy 的关键字，也没有关于 shallow copy 的准确定义，这也难怪部分人对于浅拷贝会有不同的认识。

第一种定义：一个新的对象直接拷贝已存在的对象的引用，即浅拷贝。

第二种定义：一个新的对象直接拷贝已存在的对象的对象属性的引用，即浅拷贝。

第一种和第二种的差异即是，对象本身引入与对象的对象属性的引入，因为我没有找到标准的关于浅拷贝的官方定义，所以对于这两种方式便开始思考想办法去验证。

在前面MDN中搜索 shallow copy 时，虽然没有找到它的定义，但是找了一个一些其他的内容。

Array.prototype.slice()属于浅拷贝，那我们来验证一下Array.prototype.slice()返回的新数组对象和老的数组对象之间究竟符合那种关系。

var a = [ 1, 3, 5, { x: 1 } ];
var b = Array.prototype.slice.call(a);
b[0] = 2;
console.log(a); // [ 1, 3, 5, { x: 1 } ];
console.log(b); // [ 2, 3, 5, { x: 1 } ];

很明显，属于浅拷贝的a和b并不是第一种定义所描述的，如果a和b是相同的引用对象，当b[0]改变时a[0]应当是跟着改变。

var a = [ 1, 3, 5, { x: 1 } ];
var b = Array.prototype.slice.call(a);
b[3].x = 2;
console.log(a); // [ 1, 3, 5, { x: 2 } ];
console.log(b); // [ 1, 3, 5, { x: 2 } ];

通过上面的代码既可以看出，浅拷贝的正确定义是第二种，只拷贝已存在对象的对象属性的引用，其余非对象属性是占用新的内存空间，并非与原对象共享。

3. 归纳总结

通过上面的内容，理清楚了浅拷贝的定义，而随之引出的”深拷贝“又是怎样的？和”浅拷贝“有什么关系？在下面总结一番。

浅拷贝：新的对象复制已有对象中非对象属性的值和对象属性的引用。

简单实现一个浅拷贝函数：

var a = [ 1, 3, 5, { x: 1 } ];
function copy(a){
  let b = Array.isArray(a) ? [] : {};
  for (let i in a) {
    b[i] = a[i];
  }
  return b;
}

像常用的数组方法slice和对象方法Object.assign都属于浅拷贝。

深拷贝：遍历一个对象中所有的属性的值及对象属性中的属性值，不论是嵌套了几层，要完成所有对象属性的递归后，赋值给一个新的对象。

var a = { x: 1, y: { x: 1 } };
function copy(data) {
  if (typeof data === 'number') {
    return data
  }
  for (var i in data) {
    var b = {};
    if (data.hasOwnProperty(i)) {
      b[i] = copy(data[i]);
    }
  }
  return b;
}

也可以使用快捷的深拷贝方式，完成对象复制，但是这种方式要求所要复制的对象的属性值非函数。

var b = JSON.parse(JSON.stringify(a));