为什么javascript对象在Chrome，Firefox，Safari中的控制台中显示不同的值？[重复]

Question

考虑这个JavaScript：

var foo = {bar : 1111};
console.log(foo);
console.log(foo.bar);

foo.bar = 2222;
console.log(foo);
console.log(foo.bar);

在Firefox的Firebug中，这显示了我的期望：

Object { bar=1111}
1111

Object { bar=2222}
2222

但是，在Safari和Chrome的控制台中，它显示：

Object { bar=2222}
1111

Object { bar=2222}
2222

换句话说，当打印转储时，对象在控制台中显示错误的属性，但是如果打印了特定的属性，则显示正确的值。

这是浏览器的怪癖吗？还是我所缺少的面向对象javascript的基本方面？

Answer 1

在Chrome浏览器（WebKit，也是Safari）中，console.log带有对象参数的调用会记录一个对象引用。一旦单击并打开了对象选项卡，内部将保持不变（可能是各种缓存），并且不再与最初引用的对象相关（因此，如果在稍后阶段对象发生更改，则不会反映出来）。但是，在此之前，对象保持“未缓存”状态。因此，当您多次记录一个对象然后打开每个记录的对象时，它们都指向内存中的同一对象，其值是最新的对象。

这是一个众所周知的“问题”，尽管行为是设计决定的结果（请参阅第一个链接的评论），因此开发团队不认为这是一个错误。

简便的解决方法是获取对象的非对象值的任何方法，因此可以使用任何序列化方法（例如console.log(JSON.stringify(foo));）。

https://bugs.webkit.org/show_bug.cgi?id=35801


http://code.google.com/p/chromium/issues/detail?id=44720


http://code.google.com/p/铬/问题/细节？id =
50316