Question

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

首先，我用一些数据（一些对象）初始化对象集合，然后控制台记录它。

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

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

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/

解决方案1 

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

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

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

解决方案2

刚刚在https://stackoverflow.com/a/7389177/1682509

找到了另一个不错的解决方案

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

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

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

1 个答案: