您好,欢迎访问一九零五行业门户网

一起了解JS中的深拷贝与浅拷贝

浅拷贝
浅拷贝是对象的逐位复制。创建一个新对象,该对象具有原始对象中值的精确副本。如果对象的任何字段是对其他对象的引用,则只复制引用地址,即,复制内存地址。
大白话讲就是,浅拷贝是对对象地址的复制,并没有开辟新的栈,也就是复制的结果是两个对象指向同一个地址,修改其中一个对象的属性,则另一个对象的属性也会改变。
深拷贝
深拷贝复制所有字段,并复制字段所指向的动态分配内存。深拷贝发生在对象及其引用的对象被复制时。
大白话讲就是,深拷贝则是开辟新的栈,两个对象对应两个不同的地址,修改一个对象的属性,不会改变另一个对象的属性。
look see see 例子
浅拷贝:它将x的引用复制到y中。因此,x和y的地址是相同的,也就是说它们指向相同的内存位置。
深拷贝:复制x的所有成员,为y分配不同的内存位置,然后将复制的成员分配给y,实现深拷贝。这样,如果x消失了,y在内存中仍然有效。
考虑下面的代码:
var employeedetailsoriginal = {    name: '前端小智',   age: 18,  profession: '前端开发' };
假设你想创建一个这个对象的副本,这样即使原始值被改变了,仍然可以通过副本得到原始对象的值。
我会这样做:
var employeedetailsduplicate = employeedetailsoriginal; // 浅拷贝
如果咱们改变一个值:
employeedetailsduplicate.name = '王大治';
这样操作,咱们的原始对象 employeedetailsoriginal 的属性 name 也会跟着改变,因为这里是一个浅拷贝。这样咱们就获取不到原始对象的值了。所以这种拷贝做法是不对的。
但是,通过使用原始employeedetailsoriginal变量的属性创建一个全新的变量,就可以创建一个深拷贝副本。
var employeedetailsduplicate = {  name: employeedetailsoriginal.name,  age: employeedetailsoriginal.age,   profession: employeedetailsoriginal.profession}; // 深拷贝
现在,如果更改employeedetailsduplicate.name,它只会影响employeedetailsduplicate,而不会影响employeedetailsoriginal。
谈谈 object.assign()
object.assign()是咱们经常用到的方法,其实这个方法就是浅拷贝。但是它又有一点特殊的地方,就是可以处理第一层的深拷贝。
var employeedetailsoriginal = {    name: '前端小智',  family: {    name: '前端大家庭'  }};var employeedetailsduplicate = object.assign({}, employeedetailsoriginal );employeedetailsduplicate.name = '王大治'employeedetailsduplicate.family.name = '后端大家庭'console.log(employeedetailsoriginal ); // { name: 前端小智, family: {name: 后端大家庭} }console.log(employeedetailsduplicate);// { name: 王大冶智, family: {name: 后端大家庭} }
看上面的例子,属性name的值并没有跟着变,但是属性中family的name的值跟着变了。
如何实现深拷贝
唯一的作法就是克隆这个对象。
对于简单的json对象,最简单的方法是var objectisnew  = json.parse(json.stringify(objectisold));//如果使用jquery,可以使用:// 浅拷贝var objectisnew = jquery.extend({}, objectisold);// 深拷贝var objectisnew = jquery.extend(true, {}, objectisold);
纯js方法来深拷贝对象(并非最佳方法)
function keepcloning(objectpassed) {  if (objectpassed=== null || typeof objectpassed!== 'object') {    return objectpassed;  }    // 临时存储原始的obj的构造  var temporary_storage = objectpassed.constructor();   for (var key in objectpassed) {    temporary_storage[key] = keepcloning(objectpassed[key]);  }   return temporary_storage;}var employeedetailsoriginal = {    name: '前端小智',   age: 18,   profession: '前端开发' };var employeedetailsduplicate = (keepcloning(employeedetailsoriginal));employeedetailsoriginal.name = 前端大治;console.log(employeedetailsoriginal);console.log(employeedetailsduplicate);
总结
了解深拷贝也不仅仅是为了应付面试题,在实际开发中也是非常有用的。例如后台返回了一堆数据,你需要对这堆数据做操作,但多人开发情况下,你是没办法明确这堆数据是否有其它功能也需要使用,直接修改可能会造成隐性问题,深拷贝能帮你更安全安心的去操作数据,根据实际情况来使用深拷贝,大概就是这个意思。
本文转载自:https://segmentfault.com/a/1190000020438346
相关教程推荐:javascript视频教程
以上就是一起了解js中的深拷贝与浅拷贝的详细内容。
其它类似信息

推荐信息