【JavaScript】深拷贝与浅拷贝，涉及值类型与引用类型（内含手写深拷贝代码）

红太狼 2023-01-23 14:48 154阅读 0赞

# 1. 前言 #

是否遇到过当我复制一份对象的副本出来，`对副本进行修改后，原对象却也被修改了？`从大多数情况来说，这并非我们本意，我们希望能够只对指定的数据进行操作、修改，这与 JavaScript 中的 `值类型` 和 `引用类型` 有关。

# 2. 值类型与引用类型的区别 #

## 2.1 区别 ##

**1）值类型**

在内存中的保存形式为： `key-value`，`value` 等于其 `值`，如下代码可用下图表示：

let a = 1
    let b = 2

*  a 与 b 变量 `相互独立`，赋值不会受彼此的影响
 *  `key` 对应的是某个值  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70]

**2）引用类型**

在内存中保存的形式为：`key-value`，`value` 等于其指向的 `引用类型的内存地址`，如下代码可用下图表示：

let obj = { 
    	val: '...'
    }
    
    let a = obj
    let b = obj

*  `key` 对应的 `value`，是指向某个引用类型的 `内存地址`
 *  **若改变 a 中属性的值，b 中的属性值也会被改变**，因为它们实质上都 **指向同一个对象**，操作的时候也是操作的同一个对象  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70 1]

## 2.2 常见的值类型和引用类型 ##

**1）值类型**

*  string
 *  number
 *  undefined
 *  Symbol
 *  boolean

**2）引用类型**

*  数组
 *  对象
 *  null（特殊的引用类型，指向空地址）
 *  function（本文不探讨，因为 function 一般不存在拷贝、赋值等操作）

# 3. 何为深浅拷贝？ #

由上述可知，引用类型的值实际上是指向一个地址，而值类型存的是真正的值。

因此，对于 `值类型` 而言，所有的赋值或拷贝操作都是深拷贝，**都会单独开辟出一块内存空间存放当前的值**，互不影响。

而对于 `引用类型`，**则会分成浅拷贝和深拷贝**，区别如下：

**1）浅拷贝**

**仅复制指向的地址**，没有新生成的引用类型，因此新值若改动，也会 **同步影响到原有的引用类型**。

`注意` 如果仅复制了第一层的数组或对象的属性，**而无法复制更深层的嵌套的对象或数组，则其还是为浅拷贝**，因为属性 city 仍然是一个引用类型。

// 如下示例，newObj 仍然是浅拷贝
    let obj = { 
        name: 'Jokerls',
        age: 22,
        city: ['FuZhou']
    }
    
    let newObj = {  ...obj }
    
    newObj.name = 'other'
    console.log(obj.name)  // 打印 Jokerls，尽管这里实现了复制第一层属性的值，避免了对 name 造成影响，但是 city 仍然是一个引用类型
    
    newObj.city[0] = 'QuanZhou'
    console.log(obj.city[0])  // 打印 QuanZhou，可见仍然对原对象造成了影响，因此无法复制更深层次属性的方法，仍然是浅拷贝

**2）深拷贝**

能够遍历数组或对象中的每一层嵌套，并将每个属性值 **完全开辟出新的内存空间来存储**，即为深拷贝

实现的效果如下，`deepClone` 的具体实现方法参考 `4.3`

let obj = { 
    	name: 'Jokerls',
    	age: 22,
    	city: ['FuZhou']
    }
    				
    let newObj = deepClone(obj)
    newObj.city[0] = 'QuanZhou'
    console.log(obj.city[0]);  // FuZhou, 可见 obj 不受 newObj 被修改的影响，则可以说 newObj 是一个深拷贝出来的对象

# 4. 如何进行深拷贝 #

**1）为什么浏览器内核不在赋值时直接进行深拷贝？**

浏览器深知，深拷贝的 `深层遍历` 会在每次对引用类型赋值时，会带来 **性能上的巨大消耗**，因此当你对引用类型使用 `"="` 号进行赋值时，**默认是进行浅拷贝**，仅拷贝内存地址可以大大降低性能消耗，但这与我们独立操作数据的意愿相反，因此我们可以用如下的方法来进行深拷贝`（如下两种方法均可用于数组和对象的深拷贝）`。

**2）方法一：JSON.parse(JSON.stringify(obj))**

let obj = { 
    	name: 'Jokerls',
    	age: 22,
    	city: ['FuZhou']
    }
    
    let newObj = JSON.parse(JSON.stringify(obj))

**3）方法二：手写深拷贝方法**

function deepClone(obj) { 
    	// 1.判断若为值类型，则直接返回
    	if (typeof obj !== 'object' || typeof obj == null) { 
    		return obj
    	}
    
    	// 2.初始化返回结果的类型
    	let result
    	if (obj instanceof Array) { 
    		result = []
    	} else { 
    		result = { }
    	}
    
    	for (let key in obj) { 
    		// 3.遍历属性，递归调用
    		if (obj.hasOwnProperty(key)) { 
    			// 4.判断是否为自有属性，避免来自原型链的属性污染
    			result[key] = deepClone(obj[key])
    		}
    	}
    
    	return result	
    }
    
    // 调用
    let obj = {  ... }
    let newObj = deepClone(obj)

# 5. 总结 #

1）值类型：存储的是真正的 `值`

2）引用类型：存储的是指向 `引用类型的地址值`

3）浅拷贝：仅做 `第一层拷贝`，`会影响` 到原引用类型的值

4）深拷贝：`循环遍历`引用类型中所有的嵌套，`不会影响` 到原引用类型的值

5）深拷贝的方法：

*  `JSON.parse(JSON.stringify(obj))`
 *  `deepClone`：需手写，参见 4.3

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70]: /images/20221004/245b3133e62e49968c9df7e8058e1504.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70 1]: /images/20221004/37706cec1db44093894597f18eae779f.png