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

时间:2012-11-18 02:28:49

标签: javascript oop inheritance

我遇到了问题。我正在研究一个相当大的JavaScript项目,我正在学习如何使用OOP。 JS中有点奇怪,我相信你知道。

所以这就是我要做的事情:我有一个基础'课',我称之为AbstractAnimal。我有另一个名为Animals的课程。在Animals课程内,我有三个小组,分别为ManMonkeyElephant。我希望每个组都继承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/

我能帮帮我吗?谢谢!

P.S。不,实际上,整个动物都是隐喻的,我实际上并不是在为动物园编程。 :)

1 个答案:

答案 0 :(得分:5)

不知道我是否完全理解你的问题,但也许你太复杂了,或者你错过了一些概念,但你的原型链可以这样表示:

// 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'