JavaScript对象解构疑问：修改一个对象为何另一个也随之改变？

代码示例 #

let pppp = {
    name: "duanxiao",
    age: 1,
    job: {
        title: "~~~"
    }
};
let ppppCopy = {};

({
    name: ppppCopy.name,
    age: ppppCopy.age,
    job: ppppCopy.job
} = pppp);

pppp.job.title = "Hacker";

console.log(pppp);
console.log(ppppCopy);

现象 #

运行后两个对象的输出结果完全一致，修改其中一个对象的嵌套属性时，另一个对象的对应属性会同步变化。

原因 #

这是因为你使用的是浅拷贝方式：

• 对于name、age这类基础数据类型（字符串、数字），赋值时是直接复制值本身，所以ppppCopy和pppp的这些属性是相互独立的。
• 但job是嵌套对象，属于引用类型。引用类型赋值时，复制的不是对象的内容，而是对象在内存中的引用地址。也就是说，pppp.job和ppppCopy.job指向的是内存中同一个对象。
• 当你修改pppp.job.title时，本质是修改了那个共享对象的属性，所以通过ppppCopy.job访问时，看到的也是修改后的结果。

如果要让两个对象的嵌套属性互不影响，需要使用深拷贝，比如通过JSON.parse(JSON.stringify(pppp))实现（注意该方法无法处理函数、循环引用等场景），或者手动递归复制所有嵌套对象。

内容的提问来源于stack exchange，提问作者nox