javascript inheritance with prototype - redundant object

Question

I'm reading a tutorial about inheritance in JavaScript, and there is the following statement:

For an object of Rabbit class to inherit from Animal class we need:

Define Animal
Define Rabbit
Inherit Rabbit from Animal:

Rabbit.prototype = new Animal()

They say that this approach has a disadvantage of a need to create a redundant object. I don't understand why I need to create that redundant object? I've tried the following and it worked without creating redundant objects:

function Animal() {};
function Rabbit() {};
Rabbit.prototype = Animal.prototype
Animal.prototype.go = function() {alert("I'm inherited method"};
var r = new Rabbit();
r.go();

What am I missing here?

Alnitak · Accepted Answer · 2013-08-28 10:40:13Z

3

What you're missing is that with your code, Rabbit and Animal share the exact same prototype. If you added an eatCarrot method to Rabbit then every other Animal would have that method too.

The tutorial you're using is actually somewhat out of date. The preferred way to subclass instead is to use Object.create to create a brand new prototype object for Rabbit that chains to the Animal.prototype:

Rabbit.prototype = Object.create(Animal.prototype);
Rabbit.prototype.constructor = Rabbit;

Note that this does not depend on subclassing the Rabbit from an instance of Animal.

See MDN for more information.

edited Aug 28, 2013 at 10:40

answered Aug 28, 2013 at 10:34

Alnitak

341k72 gold badges420 silver badges503 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

John Dvorak · Accepted Answer · 2013-08-28 10:33:30Z

3

There is a critical deficiency of your approach, best demonstrated by an example:

function Animal() {};
Animal.prototype.feed = function(){
  console.log("feeding")
};

function Rabbit() {this.teeth = 4};
Rabbit.prototype = Animal.prototype; // oops
Rabbit.prototype.feed = function(){
  if(this.teeth > 1){
    console.log("chewing")
  } else {
    throw "I have no teeth!"
  }
}

var leechworm = new Animal;
leechworm.feed(); //throws

since leechworm is an Animal, it should be able to feed no matter what kinds of animals we define, but since Animal.prototype === Rabbit.prototype, Animal.prototype.feed is the same as Rabbit.prototype.feed. The leechworm will complain about his lack of teeth.

answered Aug 28, 2013 at 10:33

John Dvorak

27.4k13 gold badges73 silver badges86 bronze badges

Collectives™ on Stack Overflow

javascript inheritance with prototype - redundant object

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related