深拷贝和浅拷贝的区别

suemi 发布于2019-08-21 17:07 / 1179人阅读

摘要：深拷贝和浅拷贝的区别背景最近在用框架写页面，赋值给中的对象时会出现一个问题，赋值和被赋值对象之中任何一个有变化，另一个也会随之变化。

深拷贝和浅拷贝的区别

背景：
最近在用vue框架写页面，赋值给Vue.$data中的对象时会出现一个问题，赋值和被赋值对象之中任何一个有变化，另一个也会随之变化。
例如：

var b = {
    foo: 123
};
var vm = new Vue({
    el: "#demo",
    data: {
        a: b
    }
});

var b.foo = 456;
console.log(a.foo); //输出456

var a.foo = 789;
console.log(b.foo); //输出789

遇到问题之后在网上查原因才了解到js有深拷贝和浅拷贝的区别，提到这个，又不得不提js中的两种变量类型，即值类型（数值、布尔值、null、undefined）和引用类型（对象、数组、函数）。值类型保存于栈中，而引用类型保存在堆中。说到这，又得说下值类型和引用类型赋值时的不同，值类型赋值时会在内存中开辟一块新的空间，然后把赋过来的值保存于这块新开辟的空间中，引用类型赋值时也会开辟一块新的空间，不同的时新的空间保存的是赋值对象虽在的地址（即浅拷贝，也就是说赋值和被赋值对象引用的是同一个对象，所以改变其中任何一个对象时，另一个会随之改变）。所以深拷贝和浅拷贝概念只针对于引用类型，对于值类型来说没有意义。

但在编写程序时，往往需要被赋值的对象生成一个新的对象，而不是赋值对象的一个引用，这个时候我们就需要使用深拷贝了。下面是javascript|MDN上的一个例子，里面分别描述了浅拷贝和深拷贝及其的实现方法。

function test() {
  "use strict";
  // 浅拷贝
  let obj1 = { a: 0 , b: { c: 0}};
  let obj2 = Object.assign({}, obj1);
  console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}
  
  obj1.a = 1;
  console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
  console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}
  
  obj2.a = 2;
  console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
  console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}}
  
  obj2.b.c = 3;
  console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}}
  console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}}
  
  // 深拷贝
  obj1 = { a: 0 , b: { c: 0}};
  let obj3 = JSON.parse(JSON.stringify(obj1));
  obj1.a = 4;
  obj1.b.c = 4;
  console.log(JSON.stringify(obj3)); // { a: 0, b: { c: 0}}
}

GPU云服务器云服务器深拷贝和浅拷贝深拷贝 javascript深拷贝 linux的拷贝

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89153.html

JS里深拷贝和浅拷贝的释义

摘要：本文解释中深拷贝和浅拷贝的区别。深拷贝深拷贝指递归的复制对象的属性给新对象。有些时候一层的深拷贝被认为是浅拷贝，比如的值是一个对象，浅拷贝出来的新对象直接引用了原对象的对象，所以也会相互影响的。本文解释javascript中深拷贝和浅拷贝的区别。浅拷贝/Shallow Copy 浅拷贝指拷贝了引用值。 var original = {prop1 : Prop1, prop2 : p...

zollero 2019-08-23 12:22 评论0 收藏0
浅探js深拷贝和浅拷贝

摘要：接下来就让我们更细致的探究中的深浅拷贝。总结以上对深拷贝和浅拷贝做了简单的介绍，在深拷贝的实现上也只介绍了最简单的实现形式，并未考虑复杂情况以及相应优化，想要对深拷贝有更深入的了解，需要大家花时间去深入研究，或者可以关注我后续文章的动态。对象和数组的拷贝对我来说一直都是一个比较模糊的概念，一直有点一知半解，但是在实际工作中又偶尔会涉及到，有时候还会一不小心掉坑里，不知道大家有没有同样...

habren 2019-08-23 13:01 评论0 收藏0
探索php和python下对象的深拷贝和浅拷贝

摘要：对于而言，情况可能会有点小复杂，因为一切皆为对象，所以的普通赋值深拷贝和浅拷贝之间都是有细微区别的。二下的他们在中，对象的赋值和传递都是引用。一、深拷贝与浅拷贝深拷贝：赋值时值完全复制，完全的copy，对其中一个作出改变，不会影响另一个浅拷贝：赋值时，引用赋值，相当于取了一个别名。对其中一个修改，会影响另一个对于PHP而言，= 赋值时，普通对象是深拷贝，但对对象来说...

shinezejian 2019-07-01 12:25 评论0 收藏0
探索php和python下对象的深拷贝和浅拷贝

摘要：对于而言，情况可能会有点小复杂，因为一切皆为对象，所以的普通赋值深拷贝和浅拷贝之间都是有细微区别的。二下的他们在中，对象的赋值和传递都是引用。一、深拷贝与浅拷贝深拷贝：赋值时值完全复制，完全的copy，对其中一个作出改变，不会影响另一个浅拷贝：赋值时，引用赋值，相当于取了一个别名。对其中一个修改，会影响另一个对于PHP而言，= 赋值时，普通对象是深拷贝，但对对象来说...

wizChen 2019-07-30 14:51 评论0 收藏0
浅拷贝与深拷贝的区别

摘要：浅拷贝与深拷贝一数据类型数据分为基本数据类型，和对象数据类型。浅拷贝是按位拷贝对象，它会创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。对于字符串数字及布尔值来说不是或者对象，会拷贝这些值到新的数组里。浅拷贝与深拷贝一、数据类型数据分为基本数据类型(String, Number, Boolean, Null, Undefined，Symbol)和对象数据类型。基本数据类...

jsyzchen 2019-08-02 16:13 评论0 收藏0