JavaScript控制檯登錄彙報對象屬性不正確

Question

這可能是與JS小提琴一個問題，但我使用console.log()打印對象的集合的值。

首先我用一些數據（一些對象）和控制檯記錄它來初始化對象集合。

然後我更新此收集了一些新的數據和控制檯日誌它。

發生的情況是，即使對象數據已更改，第一個和第二個控制檯日誌也是完全相同的。我想知道這是否是一個錯誤，或者如果我做錯了什麼。

http://jsfiddle.net/n302nsbh/18/

function FooManager() { 
    this.objects = {}; 

    this.update = function(data) { 
     var self = this; 
     $.each(data, function(i, e) { 
      var foo = self.objects[i]; 
      if (typeof foo === "undefined") { 
       foo = new Foo(e); 
       self.objects[i] = foo; 
      } else if (foo instanceof Foo) { 
       foo.update(e); 
      } 
     }); 
    } 
    return this; 
} 

function Foo(data) { 
    this.name = data.name; 
    this.age = data.age; 
    return this; 
} 

Foo.prototype.update = function(data) { 
    this.name = data.name; 
    this.age = data.age; 
} 

//------ Update 1 --------// 

var appData = { 
    "0": { 
     name: "a", 
     age: 2 
    }, 
    "1": { 
     name: "b", 
     age: 3 
    } 
} 

var fooManager = new FooManager(); 
fooManager.update(appData); 
console.log(fooManager.objects); 

//------ Update 2 --------// 

var newAppData = { 
    "0": { 
     name: "a", 
     age: 443 
    } 
} 

fooManager.update(newAppData); 
console.log(fooManager.objects); 

兩個更新1和更新2日誌是相同！

Answer 1

當您撥打console.log()時，瀏覽器不保存整個對象，只是對其的引用。當您稍後檢查它時，瀏覽器將獲取該對象的當前版本。

您可以通過在對象中附加一個新元素來測試它。

調用此底：

var newAppData = { 
    "2": { 
     name: "a", 
     age: 443 
    } 
} 

在控制檯，它會顯示爲

Object {0: Foo, 1: Foo} 
Object {0: Foo, 1: Foo, 2: Foo} 

但是當你打開第一個日誌條目，你會看到所有的三種元素，所以瀏覽器檢查當前版本。

演示：https://jsfiddle.net/n302nsbh/22/

解決方案1 ​​

要查看對象的元素的當前版本中，直接引用它console.log(fooManager.objects[0]);這將輸出你的腳本：

Foo {name: "a", age: 2} 
Foo {name: "a", age: 443} 

演示：https://jsfiddle.net/n302nsbh/23/

解決方案2

剛剛找到另一個很好的解決方案，在https://stackoverflow.com/a/7389177/1682509

使用console.log(JSON.parse(JSON.stringify(fooManager.objects)));獲得瀏覽的快照。

演示：https://jsfiddle.net/n302nsbh/24/