與 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中文網其他相關文章！