JavaScript中的浅拷贝与深拷贝

时间:2021-08-18 19:53:10
了解什么是浅拷贝与深拷贝之前,首先要明白JavaScript中值类型与引用类型的存储特征。

1. 值类型分为两种:
基本数据类型:string、number、boolearn、undefined、null
复合数据类型:Array、Object、Function、Date、RegExp……
2. 赋值
```2.1基本数据类型赋值示例
var num = 123;
var num2 = num;
```
* 值类型赋值的存储特点, 将变量内的数据全部拷贝一份, 存储给新的变量.
* `var num = 123` 表示变量中存储的数字是 123.
* 然后将数据拷贝一份,就是将 123 拷贝一份. 那么内存中有 2 个 数据
* 将拷贝数据赋值给 `num2`,num2的变量值改变不会影响num的变量值
* 其特点是在内存中有**两个数据副本**.


```2.2复合数据类型赋值示例
   var o = { name: '张三' };
var obj = o;
```
* 赋值就是将 变量 o 中存储的数据拷贝一份, 然后将该数据赋值给 obj
* 特点是内存中只有 1 份数据,对象o和对象obj的name属性值都指向同一个地址。
* 问题: 修改 对象obj中 的 name 属性会影响到 原来对象o 中的 name属性对应的值。

那么问题来了,复合数据类型怎么才可以将值赋值给另外一个对象,并且在另外一个对象修改值的情况下不影响自身的值呢?
下面就说一下我理解的深拷贝与浅拷贝:
# 深拷贝与浅拷贝

1. 什么是深拷贝, 什么是浅拷贝

浅拷贝:*只针对当前对象的属性进行拷贝,而当当前对象的属性是引用类型时,这个不考虑。
*属性是引用类型,拷贝后引用的是地址,如果进行更改,会影响拷贝的对象属性。

深拷贝:*针对当前对象的数据的所有引用结构都拷贝一份,数据在内存中是独立的。
       *属性是引用类型,如果进行更改,不会影响拷贝的对象属性

2. 实现深拷贝的代码封装
var deepCopy = function () {
// 1, 创建一个对象
var temp = {};
// 2, 拷贝属性, 判断如果是引用类型需要深拷贝
for ( var k in this ) {
if ( typeof this[ k ] === 'object' ) {
temp[ k ] = this[ k ].deepCopy();
} else {
temp[ k ] = this[ k ];
}
// temp[ k ] = this[ k ];
}
// 3, 返回对象
return temp;
};

测试示例:
var car = { name: '法拉利' };
var p = { name: '张三', age: 19, gender: '男', car: car };

//给对象car和对象p动态添加 拷贝的 方法
car.deepCopy = deepCopy;
p.deepCopy = deepCopy;

//重新定义一个newP对象,将对象p中的所有属性与方法都赋值给newP。
var newP = p.deepCopy();

//这个时候修改对象p中的属性方法对应的值时,如果在没有调用封装的深拷贝的函数时,newP的值也会相应改变。
//调用了深拷贝的函数之后,即使对象p中的值改变,也不会影响newP中值。
p.name = '李四';
p.age = 20;
p.gender = '女';
p.car.name = '兰博基尼';
以上就是实现深拷贝的方法。