Javascript 深层嵌套对象复制更新它的值，甚至在它被改变之前

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));

Javascript 深层嵌套对象复制更新它的值，甚至在它被改变之前

Javascript Deep Nested Object Copy updating it's value even before it has been changed

javascript

object

deep-copy