JavaScript初学学习笔记6：JavaScript之克隆（浅层克隆，深度克隆）

爱被打了一巴掌 2022-11-24 14:21 143阅读 0赞

## 浅层克隆 ##

要将 对象 obj 克隆给对象 obj1

//浅层克隆实现
    var obj = {
        
    	name: 'abc',
    	age: 20,
    	sex: 'male',
    	arr: ['aaa', 'bbb', 'ccc']
    }
    
    function copy(origin, target) {
        
    	var target = target || {
        };
    	//为了防止用户不传 target（容错），给了参数就直接用，不给就当空对象
    	for (var prop in origin) {
        
    		target[prop] = origin[prop];
    	}
    	return target;
    }
    var obj1 = copy(obj);

然而，浅层克隆存在相应的问题  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70]

## 浅层克隆为什么会出现这种问题 ##

首先我们需要清楚 JavaScript 中的数据类型总体来说分为两种，他们分别是：基本数据类型 和 复杂数据类型

基本数据类型（值类型）：数值型（Number)，字符类型（String），布尔值型（Boolean），null 和 underfined

复杂数据类型（引用数据类型）：函数，对象，数组等

1.  基本数据类型：这些值都有“固定的大小”，往往都保存在"栈内存"中（闭包除外）。变量之间的互相赋值，是指开辟一块新的内存空间，将变量值赋给新变量保存到新开辟的内存里面；之后两个变量的值变动互不影响
2.  复杂数据类型：引用数据类型的值是保存在堆内存中的对象。变量之间的互相赋值，只是指针的交换，而并非将对象（普通对象，函数对象，数组对象）复制一份给新的变量，对象依然还是只有一个，只是多了一个指引

因此在浅层克隆中

*  基本数据为值传递，复杂数据类型（对象，数组）仍为引用传递。引用传递使对象指向相同的地址空间，改变一个对象，另一个也会随之改变。

而我们需要的克隆 是所有元素或属性均完全复制，与原对象完全脱离，也就是说所有对于新对象的修改都不会反映到原对象中。

## 深度克隆思路 ##

需要一个分析环节，分析待拷贝的是什么，是原始值就按原来的方法拷贝过来，是引用值就分析是数组还是对象。如果是数组，就新建一个数组；如果是对象，就新建一个对象。再一层层看，形成一个递归。

思路步骤

1.  先把所有的值都遍历一遍（看是引用值和原始值）
2.  判断是原始值，还是引用值？用 typeof 判断是不是 object。
    
    1.  如果是原始值就直接拷贝。
    2.  如果是引用值，判断是数组还是对象。
3.  判断是数组还是对象
    
    1.  如果是数组，就新建一个空数组。
    2.  如果是对象，就新建一个空对象。
4.  建立了数组以后，如果是挨个看原始对象里面是什么，都是原始值就可以直接copy过来了；或者，建立了对象以后，挨个判断对象里面的每一个值，看是原始值还是引用值
5.  递归

### 知识点补充——如何区分 数组 和 对象 ###

#### 1.instanceof ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70 1]  
可通过 instanceof Array 来判断是否是数组

#### 2.constructor ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70 2]

同样，也可通过construct 判断其构造函数来区分 数组 和 对象

#### 3.toString ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70 3]  
这里，我们使用

Object.prototype.toString.call(a)

来实现区分（不是用.toString() ）

## 深度克隆代码实现 ##

更改前  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70 4]  
更改后的obj的arr属性并未被更改  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70 5]

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

end

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70]: /images/20221124/35837f345dea44d5bf13b85428db5a23.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70 1]: /images/20221124/79004d91fab64035bd790a79ad6335be.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70 2]: /images/20221124/a4b86f03341e4115a9e8b2f4537219dc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70 3]: /images/20221124/e248dab73f81498a8de4ea26a0149be3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70 4]: /images/20221124/5db2fcf573e5476c970f63dab9d0c4df.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70 5]: /images/20221124/cd073101d7234bdfacd1b05f047d2848.png