与 Firefox 相比，为什么 Chrome 和 Safari 在控制台中显示不同的对象值？

Chrome、Firefox 和 Safari 中对象显示值不同

在不同浏览器中调试 JavaScript 对象时，开发者可能会遇到控制台中显示值的差异。本文探讨了这个问题，并为观察到的行为提供了解释。

问题

考虑以下 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

但是，在 Chrome 和 Safari 中，输出有所不同：

Object { bar=2222}
1111

Object { bar=2222}
2222

解释

这种差异源于 Chrome 的设计决策（并且，通过扩展，Safari 的）浏览器控制台。记录对象时，Chrome 会创建对该对象本身的引用。单击并打开控制台中的对象选项卡后，记录的值将保持不变，无论对象随后发生任何更改。这会导致显示值与内存中对象的实际值之间存在差异。

解决方案

要解决此问题并在 Chrome 和 Safari 中获得预期输出，开发人员可以使用任何方法序列化对象，例如 JSON.stringify():

console.log(JSON.stringify(foo));

这将显示对象的 JSON 表示形式，确保在所有浏览器中输出一致。

以上是与 Firefox 相比，为什么 Chrome 和 Safari 在控制台中显示不同的对象值？的详细内容。更多信息请关注PHP中文网其他相关文章！