DEV Community
·
理解JavaScript对象引用与复制 - 简要说明
内容提要
在JavaScript中，对象是引用类型，赋值时只复制内存地址，修改一个引用会影响所有引用。对象复制分为浅复制（仅复制第一层属性）和深复制（完全独立）。浅复制可用Object.assign或扩展运算符，深复制可用JSON方法或structuredClone。理解这些概念有助于避免意外副作用。
关键要点
-
在JavaScript中，对象是引用类型，赋值时只复制内存地址。
-
修改一个引用会影响所有引用到同一对象的变量。
-
两个变量相等是指它们引用同一内存中的对象，而不是内容相同。
-
对象复制分为浅复制和深复制。
-
浅复制仅复制第一层属性，嵌套对象仍然是引用。
-
浅复制可以使用Object.assign或扩展运算符。
-
深复制会完全独立复制整个对象，包括嵌套结构。
-
深复制可以使用JSON.parse和JSON.stringify方法。
-
JSON方法不处理函数、undefined、Infinity或特殊对象。
-
现代JavaScript中可以使用structuredClone进行深复制。
-
使用lodash等库可以实现深复制。
-
理解这些概念有助于避免在JavaScript中处理对象时的意外副作用。
延伸解读
对象引用的影响
在JavaScript中，对象是引用类型，这意味着当你将一个对象赋值给另一个变量时，实际上是复制了内存地址而非对象本身。这种特性可能导致意外的副作用，特别是在多个变量引用同一对象时，修改其中一个变量会影响所有引用该对象的变量。
浅复制与深复制的选择
选择浅复制还是深复制取决于具体需求。浅复制适用于简单对象，而深复制则适合需要完全独立副本的复杂对象。需要注意的是，使用JSON方法进行深复制时，无法处理函数和特殊对象，因此在选择复制方法时应考虑对象的结构和内容。
现代JavaScript的深复制方法
现代JavaScript提供了structuredClone方法，可以处理大多数深复制需求，包括循环引用。这一方法在旧环境中可能不被支持，因此在使用时需确认兼容性。使用第三方库如lodash的cloneDeep也是一个可靠的选择，能够简化深复制的实现。
延伸问答
JavaScript中的对象是如何工作的？
JavaScript中的对象是引用类型，赋值时只复制内存地址，修改一个引用会影响所有引用到同一对象的变量。
什么是浅复制和深复制？
浅复制仅复制对象的第一层属性，嵌套对象仍然是引用；深复制则完全独立复制整个对象，包括嵌套结构。
如何在JavaScript中实现浅复制？
可以使用Object.assign()或扩展运算符(...)来实现浅复制。
深复制的常用方法有哪些？
深复制可以使用JSON.parse和JSON.stringify方法，或使用现代JavaScript中的structuredClone。
使用JSON方法进行深复制有什么限制？
JSON方法不处理函数、undefined、Infinity或特殊对象，如Date或RegExp。
如何避免JavaScript对象操作中的意外副作用？
理解对象的引用、浅复制和深复制的概念，有助于避免在JavaScript中处理对象时的意外副作用。
