JS引用类型数据的浅拷贝与深拷贝

MangoGoing 发布于2019-08-21 16:53 / 1648人阅读

摘要：拷贝到，属性均顺利拷贝。大辉小辉，小辉，大辉小辉，小辉，大辉但是，若修改的属性变为对象或数组时，那么对象之间就会发生关联。深拷贝不希望对象之间产生关联，那么这时候可以用到深拷贝。

浅拷贝

之前文章提到，在定义一个对象或数组时，变量存放的往往只是一个地址。当我们对堆内存中的对象复制时，如果属性是对象或数组时，这时候我们拷贝的只是一个栈内存的指针。因此b对象在访问该属性时，会根据指针寻找到a对象指向的堆内存对象，两者的属性值会指向同一内存空间。

var a = {
    key1:"11111"
}
function Copy(p) {
    var c = {};
    for (var i in p) { 
    　　c[i] = p[i];
    }
    return c;
}
a.key2 = ["小辉","小辉"];
var b = Copy(a);
b.key3 = "33333";
alert(b.key1);     //1111111
alert(b.key3);    //33333
alert(a.key3);    //undefined
//对象中key1属性是字符串，key2属性是数组。a拷贝到b，12属性均顺利拷贝。给b对象新增一个字符串类型的属性key3时，b能正常修改，而a中无定义。说明子对象的key3（基本类型）并没有关联到父对象中，所以undefined。

b.key2.push("大辉");
alert(b.key2);    //小辉，小辉，大辉
alert(a.key2);    //小辉，小辉，大辉

但是，若修改的属性变为对象或数组时，那么对象之间就会发生关联。从以上弹出结果可知，对b对象进行修改，a、b的key2属性值（数组）均发生了改变。其在内存的状态，可以用下图来表示。

深拷贝

不希望对象之间产生关联，那么这时候可以用到深拷贝。既然属性值类型是数组和或对象时只会传址，那么我们就用递归来解决这个问题，把要复制的对象中所有属于对象的属性类型都遍历赋给新对象即可。

function Copy(p, c) {
    var c = c || {};
    for (var i in p) {
    　　if (typeof p[i] === "object") {
    　　　　　c[i] = (p[i].constructor === Array) ? [] : {};
    　　　　　Copy(p[i], c[i]);
    　　} else {
    　　　　　c[i] = p[i];
    　　}
    }
    return c;
    }    
a.key2 = ["小辉","小辉"];
var b={};
b = Copy(a,b);        
b.key2.push("大辉");
alert(b.key2);    //小辉，小辉，大辉
alert(a.key2);    //小辉，小辉

过程如下图

GPU云服务器云服务器 js拷贝内存数据库 js引用数据类型 js引用的数据类型 js引用json文件数据类型

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

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

JavaScript中的浅拷贝与深拷贝

摘要：所以，深拷贝是对对象以及对象的所有子对象进行拷贝实现方式就是递归调用浅拷贝对于深拷贝的对象，改变源对象不会对得到的对象有影响。为什么会有浅拷贝与深拷贝什么是浅拷贝与深拷贝如何实现浅拷贝与深拷贝好了，问题出来了，那么下面就让我们带着这几个问题去探究一下吧！如果文章中有出现纰漏、错误之处，还请看到的小伙伴多多指教，先行谢过以下↓ 数据类型在开始了解浅拷贝与深拷贝之前，让我们先...

546669204 2019-08-26 18:27 评论0 收藏0
JavaScript中的浅拷贝与深拷贝

摘要：所以，深拷贝是对对象以及对象的所有子对象进行拷贝实现方式就是递归调用浅拷贝对于深拷贝的对象，改变源对象不会对得到的对象有影响。上一篇 JavaScript中的继承前言文章开始之前，让我们先思考一下这几个问题：为什么会有浅拷贝与深拷贝什么是浅拷贝与深拷贝如何实现浅拷贝与深拷贝好了，问题出来了，那么下面就让我们带着这几个问题去探究一下吧！如果文章中有出现纰漏、错误之处...

AZmake 2019-08-23 17:08 评论0 收藏0
关于js的浅拷贝与深拷贝

摘要：原文地址浅拷贝和深拷贝只针对像这样的复杂对象的简单来说，浅拷贝只拷贝一层对象的属性，而深拷贝则递归拷贝了所有层级。浅拷贝通过来实现浅拷贝。原文地址：http://www.silenceboy.com/201... 浅拷贝和深拷贝只针对像Object, Array这样的复杂对象的.简单来说，浅拷贝只拷贝一层对象的属性，而深拷贝则递归拷贝了所有层级。浅拷贝通过 Object.ass...

summerpxy 2019-08-26 13:41 评论0 收藏0
浅谈JavaScript的浅拷贝与深拷贝

摘要：引用数据类型是存放在堆内存中的，变量实际上是一个存放在栈内存的指针，这个指针指向堆内存中的地址。栈和堆的区别其实浅拷贝和深拷贝的主要区别就是数据在内存中的存储类型不同。这里，对存在子对象的对象进行拷贝的时候，就是深拷贝了。数据类型在开始拷贝之前，我们从JavaScript的数据类型和内存存放地址讲起。数据类型分为基本数据类型和引用数据类型基本数据类型主要包括undefin...

娣辩孩 2019-08-23 13:44 评论0 收藏0
关于JavaScript的浅拷贝和深拷贝

摘要：引用类型值引用类型值是保存在堆内存中的对象，变量保存的只是指向该内存的地址，在复制引用类型值的时候，其实只复制了指向该内存的地址。前言要理解 JavaScript中浅拷贝和深拷贝的区别，首先要明白JavaScript的数据类型。JavaScript有两种数据类型，基础数据类型和引用数据类型。js的基本类型：undefined，null，string，boolean，number,s...

shenhualong 2019-08-26 12:23 评论0 收藏0