JavaScript原型覆盖

Question

我是学习JavaScript概念的新手.想了解原型继承是如何工作的.我的印象是,如果您的类继承了它的父级,并且在两个类的原型中都有相同的命名方法,当您在子实例上调用该方法时,将调用子原型中的方法.

码:

function Animal(name) {
    this.name = name;
}

Animal.prototype.printName = function () {
    console.log(this.name + ' in animal prototype');
}

function Cat(name) {
    Animal.call(this, name);
}



Cat.prototype.printName = function () {
    console.log(this.name + ' in cat prototype');
}

Cat.prototype = Object.create(Animal.prototype);

var anm1 = new Animal('mr cupcake');
anm1.printName();


var cat1 = new Cat('cat');
cat1.printName();

在调用cat1.printName()时,我希望它能记录'cat in cat prototype',但它记录了'cat in Animal prototype'.有人可以向我解释一下原因.谢谢.

Answer 1

你是正确的,但是printName()当你重置时,你的函数覆盖本身会被下一行覆盖Cat.prototype.只需移动代码的顺序即可解决问题:

function Animal(name) {
   this.name = name;
}

Animal.prototype.printName = function() {
  console.log(this.name + ' in animal prototype');
}

function Cat(name) {
   Animal.call(this, name);
}

// OLD LOCATION of code

// This was overriding your override!
// Setting the prototype of an object to another object
// is the basis for JavaScript's prototypical inhertiance
// This line replaces the existing prototype object (which is
// where your override was) with a completely new object.
Cat.prototype = Object.create(Animal.prototype);

// NEW LOCATION
// AFTER setting the prototype (and creating inheritance),
// it is safe to do the override:
Cat.prototype.printName = function() {
  console.log(this.name + ' in cat prototype');
}

var anm1 = new Animal('mr cupcake');
anm1.printName();  // "mr cupcake in animal prototype" 

var cat1 = new Cat('cat');
cat1.printName();   // "cat in cat prototype"