试图理解 JavaScript 中的继承——这是怎么回事？

Question

为什么这里说“动物”而不是“小猫”？

// create base class Animal
function Animal(animalType) {
    this.type = animalType;
    this.sayType = function () {
        alert(this.type);
    };
}

// create derived class Cat
function Cat(myName) {
    Animal.call(this, "cat"); // cat calls the Animal base class constructor

    this.name = myName;

    this.sayName = function () {
        alert(this.name);
    };
}

Cat.prototype = Object.create(Animal); // set Cat's prototype to Animal

// instantiate a new instance of Cat
var cat = new Cat("kitty");

cat.sayName();
cat.name = "lol";
cat.sayName();

http://jsfiddle.net/dgcoffman/MguUA/5/

Answer 1

Object.create(Animal); // set Cat's prototype to Animal

是的，但是对于 Animal 构造函数（或者，准确地说：对于从该函数对象继承的新对象 - 检查 docs for Object.create）。这几乎不是你想要的 - 并解释了你说 "Animal" 的奇怪结果，因为那是 Animal function's name property。

相反，您想构建一个原型链，以便 cat 实例继承自 Cat.prototype，而 Cat.prototype 继承自 Animal.prototype（继承自 Object.prototype）：

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

此外，对于原型继承，您应该在原型对象上使用 sayName 和 sayType 方法（并且仅一次）：

Animal.prototype.sayType = function() {
    alert(this.type);
};
Cat.prototype.sayName = function() { // after creation of that object, of course
    alert(this.name);
};

Answer 2

你打电话给Object.create() 的方式与我打赌你认为的不同。试试这个改变：

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

Object.create() 函数期望它的第一个参数是 object 用作返回对象的原型。当您传入函数名称“Animal”时，这意味着您希望原型对象是该函数对象，而不是函数构造的对象。

edit — Bergi 的回答涉及直接使用 Animal 原型可能更有意义，尽管从您发布的内容来看，并没有包含任何有趣的 Animal 原型对象。也许这在您的代码中的其他地方，或者稍后会添加。无论如何，如果它确实存在，最好按照他的回答做。

由于您的“Cat”构造函数直接从 Animal 构造函数中获取“sayType”属性，因此不清楚您要通过设置 Cat 原型来做什么。