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

Javascript Console Log reporting object properties incorrectly

本文关键字：属性 不正确 对象 报告 控制台 日志 Javascript      更新时间：2023-09-26

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

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

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

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

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日志完全相同！

当你调用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/

相关文章：