面试题：JavaScript prototype 链的复杂应用

Question

假设有如下代码：function Animal() {}; Animal.prototype.eat = function() { console.log('eating'); }; function Dog() {}; Dog.prototype = Object.create(Animal.prototype); Dog.prototype.bark = function() { console.log('barking'); }; let myDog = new Dog(); 请详细描述当调用 myDog.eat() 和 myDog.bark() 时，JavaScript 引擎查找方法的具体过程，涉及到 prototype 链的哪些环节？

Answer 1

1. 调用 myDog.eat() 时的查找过程：
   • 首先，JavaScript 引擎在 myDog 的自身属性中查找 eat 方法。由于 myDog 本身没有定义 eat 方法，所以查找失败。
   • 然后，JavaScript 引擎沿着 myDog 的 __proto__ （即 Dog.prototype ）查找。Dog.prototype 也没有定义 eat 方法，查找继续。
   • 接着，JavaScript 引擎沿着 Dog.prototype 的 __proto__ （也就是 Animal.prototype ）查找。在这里找到了 eat 方法，于是执行该方法，输出 eating。
   • 涉及的 prototype 链环节为：myDog.__proto__ （Dog.prototype ） -> Dog.prototype.__proto__ （Animal.prototype ）。
2. 调用 myDog.bark() 时的查找过程：
   • 同样，JavaScript 引擎先在 myDog 的自身属性中查找 bark 方法。因为 myDog 本身没有定义 bark 方法，查找失败。
   • 接着沿着 myDog 的 __proto__ （即 Dog.prototype ）查找。在 Dog.prototype 中找到了 bark 方法，于是执行该方法，输出 barking。
   • 涉及的 prototype 链环节为：myDog.__proto__ （Dog.prototype ）。