为什么javascript对象在Chrome,Firefox,Safari的控制台中显示不同的值?

时间:2011-11-23 21:12:12

标签: javascript

  

可能重复:
  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的firebug中,这显示了我的预期:

Object { bar=1111}
1111

Object { bar=2222}
2222

但是,在Safari和Chrome的控制台中显示:

Object { bar=2222}
1111

Object { bar=2222}
2222

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

这是浏览器的怪癖吗?或者是我遗漏的面向对象的javascript的一个基本方面?

1 个答案:

答案 0 :(得分:23)

在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/chromium/issues/detail?id=50316