JavaScript原型覆盖 [英] JavaScript prototype overriding

问题描述

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

I am new at learning JavaScript concepts. Want to understand how prototypical inheritance work. My impression was if your class inherits its parent, and you have a same named method in prototypes of both classes, when you call the method on child instance, the method in the child prototype will be called.

代码:

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".有人可以向我解释原因.谢谢.

On calling cat1.printName() I expected it to log 'cat in cat prototype' but it logged 'cat in Animal prototype'. Could someone please explain the reason to me. Thanks.

推荐答案

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

You are correct, but your override of the printName() function is, itself, being overridden by the next line when you reset the Cat.prototype. Simply moving the order of the code fixes the issue:

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"

这篇关于JavaScript原型覆盖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！