浅谈解决开发过程中遇到的js引用类型的深拷贝与浅拷贝(引用类型普通赋值默认会进行同时修改)
发布于 4 年前 作者 guiying13 3218 次浏览 来自 分享

在实际开发过程中会遇到Object A赋值给Object B的时候修改B的属性这时A、B的属性都发生了变化


这个时候需要先了解基本类型和引用类型的区别

JS中的类型有7种,其中number,String,null,undefined,Boolean,包括ES6种新增的symbol都是属于基本类型,引用类型有一种Object,Object是一个大的综合体,除了前面讲的基础类型另外一切皆对象(Object、Array、RegExp、Date、Function)。

基本类型存储的空间很小是存放在栈中(Stack),方便查找,不易于改变;

引用类型是由多个值构成的对象,是存放在堆中(heap),也就是说存储的是一个地址指针(point),引用值的大小会发生变化,所以不能放在栈中,不然还会影响变量查询的效率。

深拷贝与浅拷贝的区别?

eg.

基本数据类型

var a = 10;
var b = a;
b++;

console.log(a); // 10
console.log(b); // 11

引用类型

var obj1 = new Object();
var obj2 = new Object();
obj1.num = 20;
obj2 = obj1;
obj2.num++;

console.log(obj1.num); // 21
console.log(obj2.num); // 21

以上两个例子可以看出基本数据类型被赋值的是不会变化的而引用的类型被赋值会随之数据变化同时发生变化。

= 一般是指浅拷贝

obj1是引用类型,将obj2赋值给obj1时,其实只是将obj1的引用类型的内存地址赋值给obj2,此时obj1和obj2实际存的是指向同一个内存块地址,所以obj1或obj2的值被修改后,另一个也会法生修改,从而可以引出深拷贝

解决方案

  1. JSON的转换方式
将对象转换为基础类型的String,赋值后在转换为对象,通过这个规避对象赋值只是赋值引用地址的问题
var obj1 = new Object();
var obj2 = new Object();
obj1.num = 20;
obj2  = JSON.parse(JSON.stringfy(obj1));
obj2.num++;

console.log(obj1.num); // 20
console.log(obj2.num); // 21

这种情况下,obj2便与obj1脱离,没有指向同一地址,相当于将obj2重新赋值。

1 回复

刚准备进来说一声,用JSON.stringfy()和JSON.parse()能解决默认浅拷贝的问题。仔细一看,原来你这是文章不是求助帖 手动捂脸。

回到顶部