考虑这个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的基本方面?
在Chrome浏览器(WebKit,也是Safari)中,console.log带有对象参数的调用会记录一个对象引用。一旦单击并打开了对象选项卡,内部将保持不变(可能是各种缓存),并且不再与最初引用的对象相关(因此,如果在稍后阶段对象发生更改,则不会反映出来)。但是,在此之前,对象保持“未缓存”状态。因此,当您多次记录一个对象然后打开每个记录的对象时,它们都指向内存中的同一对象,其值是最新的对象。
console.log
这是一个众所周知的“问题”,尽管行为是设计决定的结果(请参阅第一个链接的评论),因此开发团队不认为这是一个错误。
简便的解决方法是获取对象的非对象值的任何方法,因此可以使用任何序列化方法(例如console.log(JSON.stringify(foo));)。
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