Chrome DevTools中有關JavaScript對象的日志信息如此混亂的原因是什么？

Question

如果我在jsFiddle中運行此代碼：

function Animal() {
}

var animal = new Animal();

console.log(animal);
console.log(Animal.prototype);
console.log(animal.__proto__);

然后在Chrome的DevTool窗口的控制台中獲得以下結果（3x Animal {} ）：

Animal {} (index):26
Animal {} (index):27
Animal {} (index):28

在我看來，這非常令人困惑，因為在這種情況下，我們只知道Animal.prototype和animal.__proto__指向同一對象。 還是有合理的理由這樣做？

Answer 1

它將其顯示為對象，並在其內部顯示其所有屬性。 在這種情況下，由於沒有任何內容，因此顯示為空白。 但是，如果我們向該方法添加屬性，例如

function Animal() {
    this.foo="bar";
}

var animal = new Animal();

console.log(animal);
console.log(Animal.prototype);
console.log(animal.__proto__);

我們得到：

Animal {foo: "bar"}
Animal {}
Animal {}

編輯：誤讀了問題

從MDN中獲取 ：創建對象時，其proto屬性設置為與其內部[[Prototype]]引用相同的對象（即，其構造函數的原型對象）。 將新值分配給proto也會更改內部[[Prototype]]屬性的值，除非對象是不可擴展的。