Javascript Deep Nested Object Copy 甚至在它被改变之前更新它的值[重复]

Question

我编写了一个普通代码，用于深度复制对象，然后在对复制对象进行一些更改之前和之后打印原始对象和复制对象。

这是为了说明改变并没有影响到原来的对象，而且两个对象是相互独立的。

问题是复制对象甚至在进行更改之前就显示了深度更改的属性。

一个答案可能是它使用了一些旧值，因为我在 Google Chrome 浏览器上测试了这段代码。 （我进行了多次测试以找出其行为的原因。）但这似乎不可能，因为我要再次声明它们并在每次代码执行时分配新值。

---

代码：

function deepCopy(obj) {
    let tempObj = {};

    for(let key in obj) {
        if(typeof obj[key] == "object") {
            tempObj[key] = deepCopy(obj[key]);
        }
        else {
            tempObj[key] = obj[key];
        }        
    }

    return tempObj;
}

let user = {
    name: "goku",
    age: 18,
    info: {
        powerLevel: 10000,
        race: "saiyan",
    },
};

let copyUser = deepCopy(user);

console.log("Before changing");
console.log(user);
console.log(copyUser);

copyUser.info.powerLevel = 50;

console.log("After changing");
console.log(user);
console.log(copyUser);

代码的输出应该是这样的：

更改前 （原始对象的）powerLevel：10000 （复制对象的）powerLevel：10000

更改后 （原始对象的）powerLevel：10000 （复制对象的）powerLevel：50

proxyConsoleLog.js:12 Before changing
proxyConsoleLog.js:12 {name: "goku", age: 18, info: {…}}age: 18info: {powerLevel: 10000, race: "saiyan"}name: "goku"__proto__: Object
proxyConsoleLog.js:12 {name: "goku", age: 18, info: {…}}age: 18info: {powerLevel: 50, race: "saiyan"}name: "goku"__proto__: Object
proxyConsoleLog.js:12 After changing
proxyConsoleLog.js:12 {name: "goku", age: 18, info: {…}}age: 18info: {powerLevel: 10000, race: "saiyan"}name: "goku"__proto__: Object
proxyConsoleLog.js:12 {name: "goku", age: 18, info: {…}}age: 18info: {powerLevel: 50, race: "saiyan"}name: "goku"__proto__: Object
undefined

为什么复制对象中的 powerLevel 值会在在实际发生更改之前更改？

Answer 1

控制台延迟加载对象。 chrome 控制台中的蓝色方形图标是一个标志，告诉您发生了这种情况。

var obj = { foo: { bar : 1 } };
console.log(obj);
console.log(JSON.stringify(obj));
obj.foo.bar = 2;
console.log(obj);
console.log(JSON.stringify(obj));