在Chrome DevTools中有關JavaScript對象的混淆日誌信息的原因是什麼

Question

如果我運行這個例如在的jsfiddle：

function Animal() { 
} 

var animal = new Animal(); 

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

然後我得到這些結果（3次Animal {}）在Chrome的DevTool窗口的控制檯：

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]]屬性的值，除非對象是不可擴展的。