javascript，引用类型，直接赋值、浅拷贝和深拷贝（含：深入剖析深拷贝）

电玩女神 2022-05-19 02:39 221阅读 0赞

# 直接赋值、浅拷贝和深拷贝对比 #

一、对象

1、直接赋值：赋值的是引用，被复制的对象的所有变量、对象仍然指向原对象。

2、浅拷贝：被复制的对象的所有变量，都含有与原对象相同的值，而所有的对其他对象的引用仍然指向原对象。

3、深拷贝：被复制对象的所有变量都含有与原来的对象相同的值，把要复制的对象所引用的对象都复制了一遍。** **

**二、**  
转载于：https://www.zhihu.com/question/23031215/answer/46220227

首先深复制和浅复制只针对像 Object, Array 这样的复杂对象的。

简单来说，

1、直接赋值，没复制一层对象的属性，

2、浅复制，只复制一层对象的属性，

3、深复制，则递归复制了对象所有层级的属性。

下面是一个赋值例子：

下面是一个简单的浅复制例子：

因为浅复制只会将对象的各个属性进行依次复制，并不会进行递归复制，而 JavaScript 存储对象都是存地址的，所以浅复制会导致 obj.arr 和 shallowObj.arr 指向同一块内存地址，大概的示意图如下。

![v2-39761dfd012733879e0d100ec260a5d7_hd.png][]

导致的结果就是：

shallowObj.arr[1] = 5;
    obj.arr[1]   // = 5

而深复制则不同，它不仅将原对象的各个属性逐个复制出去，而且将原对象各个属性所包含的对象也依次采用深复制的方法**递归复制**到新对象上。这就不会存在上面 obj 和 shallowObj 的 arr 属性指向同一个对象的问题。

var obj = { a:1, arr: [1,2] };
    var obj2 = deepCopy(obj);

结果如下面的示意图所示：

![6604224933c95787764d941432a1f968_hd.jpg][]

需要注意的是，如果对象比较大，层级也比较多，深复制会带来性能上的问题。在遇到需要采用深复制的场景时，可以考虑有没有其他替代的方案。在实际的应用场景中，也是浅复制更为常用。

三、

转载于：[https://www.cnblogs.com/Chen-XiaoJun/p/6217373.html][https_www.cnblogs.com_Chen-XiaoJun_p_6217373.html]

在 JS 中有一些基本类型像是`Number`、`String`、`Boolean，`而对象就是像这样的东西\{ name: 'Larry', skill: 'Node.js' \}，对象跟基本类型最大的不同就在于他们的传值方式。

基本类型是按值传递，像是这样：在修改`a`时并不会改到`b`

var a = 25;
    var b = a;
    b = 18;
    console.log(a);//25
    console.log(b);//18

但对象就不同，对象传的是按引用传值：

复制一份`obj1`叫做`obj2，`然后把`obj2.b`改成`100，`但却不小心改到`obj1.b，`因为他们根本是同一个对象，这就是所谓的浅拷贝。

要避免这样的错误发生就要写成这样：

这样就是深拷贝，不会改到原本的`obj1。`

## **浅拷贝(Shallow Copy) VS 深拷贝(Deep Copy)** ##

![1005354-20161224162558589-31982395.png][]

浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。

## 浅拷贝的实现方式 ##

也就是简单地复制而已

**1、简单地复制语句**

结果为：

![1005354-20161224190116948-1910786829.png][]

**2、Object.assign()**

`Object.assign是ES6的新函数。Object.assign()` 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象。但是 `Object.assign()` 进行的是浅拷贝，拷贝的是对象的属性的引用，而不是对象本身。

Object.assign(target, ...sources)

参数：

target：目标对象。  
sources：任意多个源对象。  
返回值：目标对象会被返回。

var obj = { a: {a: "hello", b: 21} };
    var initalObj = Object.assign({}, obj);
    
    initalObj.a.a = "changed";
    console.log(obj.a.a); // "changed"

兼容性：

![1005354-20161224191033073-361561669.png][]

需要注意的是：

Object.assign()可以处理一层的深度拷贝，如下：

## 深拷贝的实现方式 ##

要完全复制又不能修改到原对象，这时候就要用 Deep Copy，这里会介绍几种Deep Copy 的方式。

**1、手动复制**

把一个对象的属性复制给另一个对象的属性

但这样很麻烦，要一个一个自己复制；而且这样的本质也不能算是 Deep Copy，因为对象里面也可能回事对象，如像下面这个状况：

虽然`obj1`跟`obj2`是不同对象，但他们会共享同一个`obj1.body``，`所以修改`obj2.body.a`时也会修改到旧的。

**2、对象只有一层的话可以使用上面的：`Object.assign()函数`**

`Object.assign({}, obj1)`的意思是先建立一个空对象\{\}，接着把`obj1`中所有的属性复制过去，所以`obj2`会长得跟`obj1`一样，这时候再修改`obj2.b`也不会影响`obj1。`  
  
因为`Object.assign`跟我们手动复制的效果相同，所以一样只能处理深度只有一层的对象，没办法做到真正的 Deep Copy。不过如果要复制的对象只有一层的话可以考虑使用它。

**3、转成 JSON 再转回来**

用`JSON.stringify`把对象转成字符串，再用`JSON.parse`把字符串转成新的对象。

这样做是真正的Deep Copy，这种方法简单易用。

但是这种方法也有不少坏处，譬如它会抛弃对象的constructor。也就是深拷贝之后，不管这个对象原来的构造函数是什么，在深拷贝之后都会变成Object。

这种方法能正确处理的对象只有 `Number, String, Boolean, Array, 扁平对象`，即那些能够被 json 直接表示的数据结构。RegExp对象是无法通过这种方式深拷贝。

也就是说，只有可以转成`JSON`格式的对象才可以这样用，像`function`没办法转成`JSON。`

var obj1 = { fun: function(){ console.log(123) } };
    var obj2 = JSON.parse(JSON.stringify(obj1));
    console.log(typeof obj1.fun);
    // 'function'
    console.log(typeof obj2.fun);
    // 'undefined' <-- 没复制

要复制的`function`会直接消失，所以这个方法只能用在单纯只有数据的对象。

**4、递归拷贝**

上述代码确实可以实现深拷贝。但是当遇到两个互相引用的对象，会出现死循环的情况。

为了避免相互引用的对象导致死循环的情况，则应该在遍历的时候判断是否相互引用对象，如果是则退出循环。

改进版代码如下：

**5、使用Object.create()方法**

直接使用var newObj = Object.create(oldObj)，可以达到深拷贝的效果。

**6、jquery**

jquery 有提供一个`$.extend`可以用来做 Deep Copy。

**7、lodash**

另外一个很热门的函数库lodash，也有提供`_.cloneDeep`用来做 Deep Copy。

# **深入剖析 JavaScript 的深复制** #

[http://jerryzou.com/posts/dive-into-deep-clone-in-javascript/][http_jerryzou.com_posts_dive-into-deep-clone-in-javascript]

[v2-39761dfd012733879e0d100ec260a5d7_hd.png]: /images/20220519/564b4bb2a6b54f298d18004d6b8a5d87.png
[6604224933c95787764d941432a1f968_hd.jpg]: /images/20220519/9a5b29c125a341f592d088141e7ea980.png
[https_www.cnblogs.com_Chen-XiaoJun_p_6217373.html]: https://www.cnblogs.com/Chen-XiaoJun/p/6217373.html
[1005354-20161224162558589-31982395.png]: /images/20220519/5174b03a6d1c4b08a315bae5299e07fb.png
[1005354-20161224190116948-1910786829.png]: /images/20220519/6f69295d7263473e848b77b18518c434.png
[1005354-20161224191033073-361561669.png]: /images/20220519/2fe0774891fd4a65a5df6ad2d415ae44.png
[http_jerryzou.com_posts_dive-into-deep-clone-in-javascript]: http://jerryzou.com/posts/dive-into-deep-clone-in-javascript/