JS 浅拷贝与深拷贝

JS 浅拷贝与深拷贝

最近的一个Vue项目中，遇到了一个修改新对象的属性值时，原对象的属性值也跟着改变了的问题。然后思考 JS 中是否有着类似 Java 的引用地址传递的思想，查了下在 JS 中的称呼为深拷贝。在此区分下浅拷贝与深拷贝的概念。

博客参考文章: https://www.cnblogs.com/echolun/p/7889848.html

1、浅拷贝

浅拷贝针对基本数据类型，number, string, boolean, null, undefined, ES6的 symbol 以及ES10的 BigInt 七类，B复制了A,B的数值改变，不会影响到A。

a.基本类型--名值存储在栈内存中，例如let a=1;

当b=a复制时，栈内存会新开辟一个内存：

实现方式

直接用 = 赋值

var a = 1;
var b = a;
console.log(a,b); //1,1
b = 2;
console.log(a,b); //1,2

2、深拷贝

浅拷贝针对引用数据类型，object, array, function等，B复制了A,B的数值改变，A的数值也跟着改变。

b.引用数据类型--名存在栈内存中，值存在于堆内存中，但是栈内存会提供一个引用的地址指向堆内存中的值，我们以上面浅拷贝的例子画个图：

当b=a进行拷贝时，其实复制的是a的引用地址，而并非堆里面的值。

而当我们a[0]=1时进行数组修改时，由于a与b指向的是同一个地址，所以自然b也受了影响，这就是所谓的深拷贝了。

实现方式

我这里直接采用JSON.stringify与JSON.parse实现深拷贝

function deepClone(a) {
  var b = JSON.stringify(a),
    objClone = JSON.parse(b);
  return objClone;
}

一般用此方法足矣，若想深拷贝对象里面的方法，请使用其他方式。