从子

Question

第一个代码：

function Animal() {}
Animal.prototype.eat = function() {
  console.log("nom nom nom");
};

function Dog() {}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype = {
  constructor: Dog,
  bark: function() {
    console.log("Woof!");
  }
};
let beagle = new Dog();
console.clear();
beagle.eat(); // Should print "nom nom nom" but displays a error that eat 
//is not a function.
beagle.bark();

第二个代码：

function Animal() {}
Animal.prototype.eat = function() {
  console.log("nom nom nom");
};

function Dog() {}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.bark = function() {
  console.log("Woof!");
}
let beagle = new Dog();
console.clear();
beagle.eat(); // Prints "nom nom nom"
beagle.bark(); // Prints "Woof!"

beagle.eat()未显示正确输出的第一个代码段有什么问题。

Answer 1

您首先将Dog的原型分配为Object.create(Animal.prototype);，但在下一行，您完全重新分配 Dog的原型为其他内容，所以继承链不再存在。调整您的第一个代码，您可能只想分配给Dog.prototype一次并使用Object.assign和Object.create：

function Animal() {}
Animal.prototype.eat = function() {
  console.log("nom nom nom");
};

function Dog() {}
Dog.prototype = Object.assign(
  Object.create(Animal.prototype),
  {
    constructor: Dog,
    bark: function() {
      console.log("Woof!");
    }
  }
);
let beagle = new Dog();
beagle.eat();