javascript - Chrome DevTools 中有关 JavaScript 对象的这种令人困惑的日志信息的原因是什么

Question

如果我在 jsFiddle 中运行它：

function Animal() {
}

var animal = new Animal();

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

Animal {}然后我在 Chrome 的 DevTool 窗口的控制台中得到这些结果（3x ）：

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]] 属性的值，除非对象是不可扩展的。