为何构造函数的prototype可见，实例beagle的prototype却返回undefined？

示例代码 #

function Dog(name) {
  this.name = name;
}
Dog.prototype = {
  constructor: Dog,
  age: 16,
  eat: function() {
    console.log('this function works')
  }
}

let beagle = new Dog("Snoopy");

console.log(Dog.prototype);
console.log(beagle.prototype);
beagle.eat();

疑问 #

运行上述JavaScript代码后，控制台输出构造函数Dog的prototype，但输出实例beagle的prototype时返回undefined；调用beagle.eat()却能正常输出'this function works'。请问为何beagle的prototype为undefined，却仍能调用原型上的eat()方法？

解答 #

• prototype是构造函数专属的属性，只有函数才有这个属性，用来指向该构造函数的原型对象。而beagle是构造函数Dog创建出来的实例对象，它本身并没有prototype属性，所以打印beagle.prototype会得到undefined。
• 实例对象能访问原型上的方法，靠的是原型链机制：每个实例对象内部都有一个隐藏的[[Prototype]]属性（可以通过Object.getPrototypeOf(beagle)或者非标准的__proto__访问），这个属性指向它的构造函数的原型对象（也就是Dog.prototype）。
• 当你调用beagle.eat()时，JS引擎会先在beagle自身的属性里找eat方法，找不到的话，就会顺着[[Prototype]]指向的原型对象继续查找，直到找到该方法或者到达原型链顶端（null）。这里刚好在Dog.prototype上找到了eat方法，所以能正常执行。

内容的提问来源于stack exchange，提问作者Aren