无法访问对象原型上的方法

我可以创建一个Cat对象并在其原型上设置一个方法来打印猫的名字。

var log = function(message) {
  var results = $('#result');
  results.append('<p>' + message + '</p>');
};

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

Cat.prototype.speak = function() {
  log('My name is ' + this.name);
};

var fluffy = new Cat('Fluffy');
var tiddles = new Cat('Tiddles');

log(fluffy.name);
fluffy.speak();
log(tiddles.name);
tiddles.speak();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"></div>

但是，当我尝试将猫的原型设置为动物时，我无法访问speak method:

function Animal(name, sound) {
    this.name = name;
    this.sound = sound;

    this.speak = function() {
        log(sound + '! My name is ' + name);
    };
}

function Cat(name) {
    this.prototype = new Animal(name, 'Meow');
}

var fluffy = new Cat('Fluffy');

fluffy.speak();  // TypeError: undefined is not a function

为什么fluffy没有得到speak()其原型方法？

如果你想学习如何在 JS 中进行继承，请阅读本指南 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript#Inheritance . prototype是的财产构造函数，不是instance.

为什么fluffy没有得到speak()其原型方法？

因为它不在原型上。你永远不会变异Cat.prototype。你设置的方式Animal，你必须打电话Animal inside Cat反而：

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

但如果你想要正确的原型继承，定义speak on Animal.prototype并通过设置继承Object.create:

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

Animal.prototype.speak = function() {
    log(this.sound + '! My name is ' + this.name);
};

function Cat(name) {
    Animal.call(this, name, 'Meow');
}
Cat.prototype = Object.create(Animal.prototype);