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

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

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) {var b={};	
  if (typeof data === 'number') {	
    return data	
  }	
  for (var i in data) {	
    	
    if (data.hasOwnProperty(i)) {	
      b[i] = copy(data[i]);	
    }	
  }	
  return b;	
}

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

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

如上内容均为自己总结，难免会有错误或者认识偏差，如有问题，希望大家留言指正，以免误人。有什么问题请留言，会尽力回答之。

如果对你有帮助不要忘了分享给你的朋友或者点击右下方的“在看”哦！也可以关注作者，查看历史文章并且关注最新动态，助你造成成为一名全栈工程师！