Javascript 控制台日志报告对象属性不正确

Question

这可能是 JS Fiddle 的问题，但我正在使用 console.log() 打印对象集合的值。

首先，我用一些数据(一些对象)初始化对象集合并在控制台记录它。

然后我用一些新数据更新这个集合并在控制台记录它。

发生的事情是第一个和第二个控制台日志都是相同的，即使对象数据已更改。我想知道这是否是错误，或者我是否做错了什么。

http://jsfiddle.net/n302nsbh/18/

function FooManager() {
    this.objects = {};

    this.update = function(data) {
        var self = this;
        $.each(data, function(i, e) {
            var foo = self.objects[i];
            if (typeof foo === "undefined") {
                foo = new Foo(e);
                self.objects[i] = foo;
            } else if (foo instanceof Foo) {
                foo.update(e);
            }
        });
    }
    return this;
}

function Foo(data) {
    this.name = data.name;
    this.age = data.age;
    return this;
}

Foo.prototype.update = function(data) {
    this.name = data.name;
    this.age = data.age;
}

//------ Update 1 --------//

var appData = {
    "0": {
        name: "a",
        age: 2
    },
    "1": {
        name: "b",
        age: 3
    }
}

var fooManager = new FooManager();
fooManager.update(appData);
console.log(fooManager.objects);

//------ Update 2 --------//

var newAppData = {
    "0": {
        name: "a",
        age: 443
    }
}

fooManager.update(newAppData);
console.log(fooManager.objects);

更新 1 和更新 2 的日志完全相同!

Answer 1

当您调用 console.log() 时，浏览器不会保存整个对象，只是对它的引用。当您稍后检查它时，浏览器将获取该对象的当前版本。

您可以通过向对象附加一个新元素来非常简单地测试它。

最后调用它:

var newAppData = {
    "2": {
        name: "a",
        age: 443
    }
}

在控制台中它将显示为

Object {0: Foo, 1: Foo}
Object {0: Foo, 1: Foo, 2: Foo}

但是当您打开第一个日志条目时，您会看到所有三个元素，因此浏览器会检查当前版本。

演示:https://jsfiddle.net/n302nsbh/22/

解决方案一

要查看对象元素的当前版本，请使用 console.log(fooManager.objects[0]); 直接引用它； 这将为您的脚本输出:

Foo {name: "a", age: 2}
Foo {name: "a", age: 443}

演示:https://jsfiddle.net/n302nsbh/23/

方案二

刚刚在 https://stackoverflow.com/a/7389177/1682509 找到了另一个不错的解决方案

使用 console.log(JSON.parse(JSON.stringify(fooManager.objects))); 获取可浏览的快照。

演示:https://jsfiddle.net/n302nsbh/24/