对象引用、浅层拷贝与深层拷贝的区别

我就是我 2021-10-26 12:28 223阅读 0赞

### 在JS中，一般的=号传递的都是对象/数组的引用，并没有真正地拷贝一个对象，那如何进行对象的深度拷贝呢？如果你对此也有疑问，这篇文章或许能够帮助到你 ###

### 一、对象引用、浅层拷贝与深层拷贝的区别 ###

js的对象引用传递理解起来很简单，参考如下代码：

var a = { name:'wanger'} var b = a ; a===b // true b.name = 'zhangsan' a.name //'zhangan'

上述代码中，使用了`=`进行赋值，于是b指向了a所指向的栈的对象，也就是a与b指向了同一个栈对象，所以在对b.name赋值时，a.name也发生了变化。为了避免上面的情况，可以对对象进行拷贝，代码如下：

var a = { name:'wanger'} var b = Object.assign({}, a) a===b // false b.name = 'zhangsan' a.name //'wanger'

上面代码将原始对象拷贝到一个空对象，就得到了原始对象的克隆，这时候a与b指向的是不同的栈对象，所以对b.name重新复制也不会影响到a.name。**但是如果a.name是一个对象的引用，而不是一个字符串，那么上面的代码也会遇到一些问题**，参考如下代码：

var a = { name:{ firstName:'wang',lastName:'er'}} var b = Object.assign({}, a) a===b // false b.name.firstName = 'zhang' a.name.firstName //'zhang'

b.name.firstName又影响到了a.name.firstName，这是因为Object.assign()方法只是浅层拷贝，a.name是一个栈对象的引用，赋值给b时，b.name也同样是这个栈对象的引用，很多时候，我们不想让这种事情发生，所以我们就需要用到对象的深拷贝。

### 二、使用JSON.parse（）与JSON.stringify（）对对象进行拷贝 ###

通常情况下，我们可以使用JSON.parse（）与 JSON.stringify（）实现对象的深克隆，如下：

var clone = function (obj) { return JSON.parse(JSON.stringify(obj)); }

这种方法只适用于**纯数据json对象的深度克隆**，因为有些时候，这种方法也有缺陷，参考如下代码：

var clone = function (obj) { return JSON.parse(JSON.stringify(obj)); } var a = { a:function(){ console.log('hello world')},b:{ c:1},c:[1,2,3],d:"wanger",e:new Date(),f:null,g:undefined} var b = clone(a)

打印如下：  
![Alt text][]  
我们发现，上述的方法会忽略值为function以及undefied的字段，而且对date类型的支持也不太友好。

更要紧的是，上述方法只能克隆原始对象自身的值，不能克隆它继承的值，参考如下代码：

function Person (name) { this.name = name } var wanger = new Person('王二') var newwanger = clone(wanger) wanger.constructor === Person // true newwanger.constructor === Object // true

打印如下：  
![Alt text][Alt text 1]

我们发现，克隆的对象的构造函数已经变成了Object,而原来的对象的构造是Person。

### 三、目前没有发现bug的对象深拷贝方法 ###

王二在网上参考了不少文章，方法都不尽完美，于是在前人基础上改造了一下，方法如下，目前没有发现有什么bug：

这里有三点需要注意：  
1、用`new obj.constructor ()`构造函数新建一个空的对象，而不是使用`{}`或者`[]`,这样可以保持原形链的继承；  
2、用`obj.hasOwnProperty(key)`来判断属性是否来自原型链上，因为`for..in..`也会遍历其原型链上的可枚举属性。  
3、上面的函数用到递归算法，在函数有名字，而且名字以后也不会变的情况下，这样定义没有问题。但问题是这个函数的执行与函数名 factorial 紧紧耦合在了一起。为了消除这种紧密耦合的现象，需要使用 `arguments.callee`。

--------------------

2017-10-03添加，之前没有考虑正则对象的问题，这里再做一下修改：

原文地址：[王玉略的个人网站][Link 1]

[Alt text]: https://user-gold-cdn.xitu.io/2017/10/17/938d3643a35a838fc5696efb8a27d97d
[Alt text 1]: https://user-gold-cdn.xitu.io/2017/10/17/342d68ed8d0570954ba3284b8457315d
[Link 1]: http://www.wangyulue.com/2017/09/21/JS%E4%B8%AD%E5%A6%82%E4%BD%95%E8%BF%9B%E8%A1%8C%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%B7%B1%E6%8B%B7%E8%B4%9D/#more