javascript console.log不能按預期工作？

Question

javascript console.log給人混淆的結果。我執行了代碼。

var obj = {a: {b: {c: {}}}}; 
    console.log(obj); 
    obj.a.b.c.name = "rafael"; 

然後我看看控制檯窗口並展開對象。這是

Object{a: {b: {c: {name: "sohan"}}}} 

但我希望它是

Object{a: {b: {c: {}}}} 

爲什麼這混亂的行爲？

Answer 1

摘要：可變對象的分辨率似乎被推遲到您在控制檯中檢查它們的那一刻。這很有意義，因爲如果您在記錄日誌時捕獲了可變對象的狀態，則每次記錄對象時都需要大量內存來執行對象的深層副本。

更多詳細資料及示例顯示此行爲： 行爲可能因瀏覽器而異，但在Chrome中，我觀察到的行爲是在console.log（obj）處記錄對JS對象的引用。該引用的值將被推遲，直到您嘗試在控制檯中展開對象。試試這個：

var obj = {a: {b: {c: {}}}}; 
console.log(obj); 

然後展開了參考（OBJ - > A - >乙 - > C），驗證沒有一個 「名稱」 屬性設置呢。

然後分配屬性：

obj.a.b.c.name = "rafael"; 

比較這對你描述的行爲：

var obj = {a: {b: {c: {}}}}; 
console.log(obj); 
obj.a.b.c.name = "rafael"; 

然後擴大對象引用看到「名字」對象C的財產已經被因爲我們只記錄了對象的引用。

Answer 2

唯一令人困惑的是被更改的名稱。這只是巫術（或者你可能是編輯）。但是，在將值應用於新屬性之前，您正在登錄到控制檯。試試這個。

var obj = {a: {b: {c: {}}}}; 
obj.a.b.c.name = "rafael"; 
console.log(obj); //console after applying the value 

你應該得到Object{a: {b: {c: {name: "rafael"}}}}

Answer 3

控制檯行爲古怪，並會根據瀏覽器和控制檯會有所不同。在谷歌瀏覽器上，首次展開時，懶惰評估了記錄到瀏覽器的對象。

意思是說，如果你登錄一個空對象x到控制檯，並展開（對象樹），它偷看，它會評估x值並顯示在控制檯{}值。但是，如果您在實際展開屬性之前添加了屬性，它將顯示當前存在於內存中的對象。所以如果你做x.test = 1，它會顯示爲{ test: 1 }。