为啥 javascript 对象在 Chrome、Firefox、Safari 的控制台中显示不同的值？ [复制]

Posted 2023-02-14

【中文标题】为啥 javascript 对象在 Chrome、Firefox、Safari 的控制台中显示不同的值？ [复制]

【英文标题】：Why does javascript object show different values in console in Chrome, Firefox, Safari? [duplicate]为什么 javascript 对象在 Chrome、Firefox、Safari 的控制台中显示不同的值？ [复制]

【发布时间】：2012-01-05 03:43:21

【问题描述】：

可能重复：Is Chrome's javascript console lazy about evaluating arrays?

考虑这个javascript：

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

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

在 Firefox 的萤火虫中，这显示了我的预期：

Object  bar=1111
1111

Object  bar=2222
2222

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

Object  bar=2222
1111

Object  bar=2222
2222

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

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

【问题讨论】：

如果我不得不猜测，我会说调试器正在内存中存储第一个对象的引用，以及第二个对象的值本身。由于您的代码更新了引用，因此正在监视的调试器中的值也会更新。不过完全是疯狂的猜测。

最好的猜测是 Safari 和 Chrome 正在优化 JavaScript 并将对 foo.bar 的赋值与原始对象定义相结合，然后在两个 console.log 语句中内联 foo.bar 的预期值.

感谢迈克和约翰。看来情况确实如此，不是吗。我不得不说，在我看来，这意味着 Safari 和 Chrome 在我尝试调试时对我的代码撒谎！如果我想在执行期间快速查看对象在代码中的两个点包含什么，那么 Safari 和 Chrome 并没有给我一个真实的表示。也许我的调试程序不够复杂，我不应该依赖代码中的手动 console.log 行？

这个以前出现过，我去找找。

@OskarSmith 我怀疑您提供的示例也太琐碎，无法真正测试行为。我怀疑优化正在完成，因为在创建和重新分配foo.bar 之间没有对对象进行“工作”。如果有一些工作，比如方法调用，我怀疑你会得到你正在寻找的行为。

【参考方案1】：

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

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

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

https://bugs.webkit.org/show_bug.cgi?id=35801http://code.google.com/p/chromium/issues/detail?id=44720http://code.google.com/p/chromium/issues/detail?id=50316

【讨论】：

webkit 漏洞：bugs.webkit.org/show_bug.cgi?id=35801

谢谢。猜猜它适合我不使用 Firebug！

是的，我不得不承认这有点蹩脚.. 它使console.log 完全无法用于追踪。但我想你可以使用传统的调试器来解决这些问题。

console.log(JSON.stringify(foo)); 应该可以调试了。

我收回这个。调用没有延迟，日志机制是基于引用的，但调用看起来完全同步。