javascript - 如何使 JavaScript 函数继承正常工作

Question

我有一个问题。我正在处理一个相当大的 JavaScript 项目，并且正在学习如何使用 OOP。这在 JS 中有点奇怪，我相信你知道。

所以这就是我正在尝试做的事情:我有一个基“类”，我称之为 AbstractAnimal。我有另一个名为 Animals 的类。在 Animals 类中，我有三个组，称为 Man、Monkey 和 Elephant。我希望这些组中的每一个都继承 AbstractAnimal，但要成为它们自己的函数，而不是连接到 AbstractAnimal。

我最初是这样做的:

Animals.prototype.Man = AbstractAnimal;
Animals.prototype.Monkey = AbstractAnimal; //etc...

但是，令人遗憾的是，这并不能满足我的需要。原因如下:

AbstractAnimal.prototype.clicked = function() { console.log("clicked") };
//If I change Man...
animals.Man.clicked = function() { console.log("HA!"); };
//Monkey is effected too...
animals.Monkey.clicked();
//Console: "HA!"

在上面的示例中，当单击 Monkey 时，我希望控制台显示“已单击”。单击 Man 时，它应该说“HA!”。

所以我在这里找到了一些我认为可以做到的东西:javascript class inherit from Function class

它几乎成功了，但不完全是。这是一个简化的测试用例:http://jsfiddle.net/9KRJk/2/

我能帮帮我吗？谢谢!

附言不，实际上，整个动物的事情都是隐喻的，我实际上并不是在为动物园编程。 :)

Answer 1

不知道我是否完全理解你的问题，但也许你把事情搞得太复杂了，或者你可能遗漏了一些概念，但你的原型(prototype)链可以这样表示:

// Extends helper
Function.prototype.extends = function( parent ) {
  this.prototype = Object.create( parent.prototype );
};

function Animal() {}
Animal.prototype = {
  clicked: function() {
    console.log('animal');
  }
};

function Man() {}
Man.extends( Animal );
Man.prototype.clicked = function() {
  console.log('man');
};

function Monkey() {}
Monkey.extends( Animal );
Monkey.prototype.clicked = function() {
  console.log('monkey');
};

var animal = new Animal();
animal.clicked(); //=> 'animal'

var man = new Man();
man.clicked(); //=> 'man'

var monkey = new Monkey();
monkey.clicked(); //=> 'monkey'