在JavaScript中,分为简单数据类型(数字、字符等)和复杂数据类型(对象、数组等),一般简单数据类型被存储在栈内存;而复杂数据类型存储在堆内存,其地址存储在栈内存里面。
所以一般将复杂数据类型赋值给其他变量的时候,一般是将其地址复制,如果对赋值后的数据进行操作,很容易改变原本的复杂数据类型。
我们举个例子,首先定义一个对象,里面有两个简单数据类型和另一个对象
var obj = {
id: 1,
name: "andy",
msg: {
age: 18 // 将地址拷贝
}
};
var o = {};
for (var k in obj) {
// k是属性名
o[k] = obj[k];
}
console.log(o);
o.msg.age = 20;
console.log(o);
console.log(obj);
我们先打印对象o,发现赋值完成:
接下来我们仅改变对象o里面age的属性,观察两个对象的age属性。
我们明明只改变了o的age,为什么obj的也会随着改变呢?这是因为在浅拷贝的情况下,里面复杂数据类型的赋值是地址的值传递,修改一个对象的同时,另一个对象也会改变。下面这张图可以更直观的理解。
js(es6)也为我们提供了浅拷贝的语法糖,同样可以实现浅拷贝,语法如下:
Object.assign(target, …sources)
Object.assign(o, obj);
o.msg.age = 20;
console.log(o);
console.log(obj);
深拷贝很简单理解了,就是将赋值后的每一个变量都单独指向,与原先的数据脱离,不再公用变量。
下图有助你的理解:
原生JS递归实现深拷贝:
var obj = {
id: 1,
name: "andy",
msg: {
age: 18
},
color: ['red', 'pink']
};
var o = {};
// 递归实现深拷贝
function deepCopy(newObj, oldObj) {
for (var key in oldObj) {
// 判断数据类型
item = oldObj[key];
if (item instanceof Array) {
newObj[key] = [];
deepCopy(newObj[key], item);
} else if (item instanceof Object) {
newObj[key] = {};
deepCopy(newObj[key], item);
} else {
newObj[key] = item;
}
}
}
deepCopy(o, obj);
o.msg.age = 19;
console.log(o);
console.log(obj);
可以看到修改一个对象的值,另一个对象不受影响。
下一篇:JavaScript高级—(8)正则表达式
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://blog.csdn.net/qq_46186155/article/details/120353551
内容来源于网络,如有侵权,请联系作者删除!