JavaScript中对象的浅复制和深复制 原 荐
栏目: JavaScript · 发布时间: 5年前
内容简介:在JavaScript中,如果要复制一个变量我们应该怎么做呢?下面这种做法是最简单的一种形式:这种复制方法只能适用于基本类型,如果声明了变量
在JavaScript中,如果要复制一个变量我们应该怎么做呢?下面这种做法是最简单的一种形式:
//把a复制给b let a = 12; let b = a;
这种复制方法只能适用于基本类型,如果 a
是对象怎么办呢?我们先来看看上面的代码在内存中做了什么事:
声明了变量 a = 12
,栈内存会分配一块区域来存储,如上图所示。把 a
赋给 b
,会在栈中重新开辟一块区域来存储 b
,并且 b
的值就是 a
的值。
假如 a
是对象,内存做了什么事呢?来看下面的例子:
let a = {}; let b = a;
如图所示,对象是存储在堆内存中的,栈中保存的是地址值,使用这种方式复制对象只不过是复制了该对象的引用而已,对象实体还是只有一个。那么对象应该怎样复制呢?对象的复制其实也就是产生一个一模一样的对象,对象包含属性和方法,我们创建一个新对象,将旧对象的属性和方法赋给新对象,这样不就是复制了一个对象吗?顺着这个思路,我们来看下面的代码:
function copy(obj){ //基本类型和函数直接返回 if(!(obj instanceof Object) || typeof obj === 'function') return obj; let newObj = {}; if(obj instanceof Array) newObj = []; for(let p in obj){ newObj[p] = obj[p]; } return newObj; } let p = { name: 'bob', friends: ['jack', 'rose'] } let p2 = copy(p); console.log(p2);
定义一个 copy
函数,接收一个参数,用以实现对象的复制,如果参数是基本类型或函数就直接返回。函数体内声明一个新对象 newObj
,然后遍历参数 obj
,将其每一个属性都赋给 newObj
,最后返回 newObj
。接着使用 copy
方法生成了 p
的一个复制对象 p2
,结果如下图所示:
但是这样有一个问题,我们来看下面的代码:
p2.friends.push('lily'); console.log(p2.friends);//["jack", "rose", "lily"] console.log(p.friends);//["jack", "rose", "lily"]
我们给 p2
的 friends
添加了一个 lily
,结果致使 p
的 friends
也被同步修改了。下面的内存图可以帮助读者理解:
从图中可以看出,虽然 p
和 p2
分别指向了两个对象,但是里面的 friends
属性还是指向的同一个数组,问题在于这段代码:
for(let p in obj){ newObj[p] = obj[p]; }
只进行了对象第一层的复制,对于对象里面引用类型的属性,则进行了地址值的复制,这就是所谓的 浅复制 ,也就是说 p.friends
和 p2.friends
是同一个对象:
console.log(p.friends == p2.friends);//true
那如何进行彻底的复制—— 深复制 呢?思路也很简单,在遍历赋值对象属性的时候,遇到属性是引用类型的,也需要把这个属性展开赋值一下,于是我们可以用递归的思想来实现,如下代码所示:
//深复制 function deepCopy(obj){ //基本类型和函数直接返回 if(!(obj instanceof Object) || typeof obj === 'function') return obj; let newObj = {}; if(obj instanceof Array) newObj = []; for(let p in obj){ if((p instanceof Object) || typeof p === 'function'){ //基本数据类型和函数 newObj[p] = obj[p]; }else{ //继续复制对象里面的对象 newObj[p] = deepCopy(obj[p]); } } return newObj; } let p = { name: 'bob', friends: ['jack', 'rose'] } let p2 = deepCopy(p); p2.friends.push('lily'); console.log(p2.friends);//["jack", "rose", "lily"] console.log(p.friends);//["jack", "rose"] console.log(p.friends == p2.friends);//false
声明了 deepCopy
函数,用于实现深复制,函数体和浅复制的函数体基本相同,只是在遍历要复制的对象的时候添加了一个判断,如果属性是基本类型或函数则进行赋值操作,否则递归调用 deepCopy
,继续复制对象里面的对象。接着演示了 deepCopy
的使用,发现修改了 p2.friends
并不会影响 p.friends
,它们已经是两个对象了。
对于浅复制,ES6中提供了 Object.assign()
方法,如下代码所示:
let p3 = Object.assign({}, p); console.log(p3.friends == p.friends);//true
不知读者是否还记得,在 JavaScript继承(四)——原型式继承 中提到过 Object.create()
方法,从使用效果上来看, Object.create()
创建的新对象有点类似浅复制,只不过新对象和原对象是一种继承关系,而 Object.assign()
创建的新对象和原对象是彼此独立的,如下代码所示:
let p4 = Object.create(p); console.log(p4.__proto__ === p);//true console.log(p3.__proto__ === p);//false
这点是读者需要注意的。
以上所述就是小编给大家介绍的《JavaScript中对象的浅复制和深复制 原 荐》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- [译]JavaScript 如何复制对象
- java中复制对象通过反射或序列化
- Java 对象属性复制组件:Mapstruct 的项目改造指南
- js的数组和对象的多种"复制"和"清空", 以及区分JS数组和对象的方法
- Android 开发中的代码片段(2)复制对象之间的属性值
- MongoDB复制选举原理及复制集管理
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Game Engine Architecture, Second Edition
Jason Gregory / A K Peters/CRC Press / 2014-8-15 / USD 69.95
A 2010 CHOICE outstanding academic title, this updated book covers the theory and practice of game engine software development. It explains practical concepts and techniques used by real game studios,......一起来看看 《Game Engine Architecture, Second Edition》 这本书的介绍吧!