首页 >> 全栈工程 >>JavaScript >> JS对象赋值和浅拷贝的区别是什么?
详细内容

JS对象赋值和浅拷贝的区别是什么?

时间:2020-11-25        阅读


赋值和浅拷贝的区别

一直以为对象赋值和对象浅拷贝是一样的,但实际上它们还是有很大差异。

先看赋值,将一个对象赋值给一个新的对象的时候,赋的其实是该对象在栈中的地址,而不是堆中的数据。 也就是一个对象的改变就会改变另外一个对象。

再看浅拷贝,浅拷贝会创建一个对象,再去遍历原始对象,如果原对象的属性值是基础类型,那么就拷贝基础类型,如果是引用类型,则拷贝的是指针。

是不是有点蒙蔽?

看一个例子:

var obj1 = {
    name: '前端大杂货铺',
    content: ['前端', '生活']
}

// 赋值
var obj2 = obj1

obj2.name = 'Gping'
obj2.content[2] = '感悟'
console.log(obj1, obj2)

1.png

var obj1 = {
    name: '前端大杂货铺',
    content: ['前端', '生活']
}

// Object.assign 是浅拷贝
var obj3 = Object.assign({}, obj1)
obj3.name = 'Gping'
obj3.content[2] = '感悟'
console.log(obj1, obj3)

2.png

obj1 是源对象,obj2 是赋值得到的,obj3 是浅复制得到的,如果我们改变的第一层数据不管是原始类型还是引用类型,那么 obj2 的改变都会导致 obj1 的改变。

obj3 如果第一层数据改变的是原始类型,那么不会影响源数据,改变的是引用类型数据,则会影响 obj1 的改变。

关于赋值,还有一个很基础的点,很惭愧,之前竟然理解错了。上代码

var a = {};
b = a;
b = {};  // 这里 b 已经指向了新的地址,和 a 已经没有任何关系了。跟new Object()应该是一样的
a.name = 'Gping';
console.log(b);  // {}

个人理解,通过对象表达式的方式创建一个对象,就已经指向新的地址的,也就是跟之前指向的地址已经没有关系了

总结

赋值和浅拷贝的区别在于对象第一层数据对原对象的影响,如果是赋值,改变会直接影响原对象。如果是浅拷贝,而且属性值是基础类型的话,就不会影响原对象。属性值为引用类型,就会影响原对象

本文转载自:https://juejin.im/post/6844904046843674631

作者:Gopal

想要了解更多相关知识,可访问 前端学习网站!!

以上就是JS对象赋值和浅拷贝的区别是什么?的详细内容,更多请关注h


最新评论
请先登录才能进行回复登录
点击图片直接加群
更多
ots网络logo

OTS网络安全门户主要提供网络信息安全教程、文章、工具,让更多的小伙伴加入我们的社区一起学习。

技术支持: 建站ABC | 管理登录