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;

1213309-20171124130901890-511917244

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

1213309-20171124131822437-430949998

实现方式

直接用 = 赋值

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.引用数据类型--名存在栈内存中,值存在于堆内存中,但是栈内存会提供一个引用的地址指向堆内存中的值,我们以上面浅拷贝的例子画个图:

1213309-20171124133428359-1292133331

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

1213309-20171124133647796-1390255671

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

1213309-20171124133934328-67216865

实现方式

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

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

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

posted @ 2020-11-24 11:40  MyDistance  阅读(102)  评论(0编辑  收藏  举报