JavaScript浅拷贝与深拷贝的区别

了解什么是浅拷贝与深拷贝之前，首先要明白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 = '兰博基尼';

以上就是实现深拷贝的方法。

Atas ialah kandungan terperinci JavaScript浅拷贝与深拷贝的区别. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!