How to extend a JavaScript prototype object twice?

Question

It's very hard to put into words what I want, so I've written a JS Example that should help get the point across.

  // create animal class
  var animal =  function(name) {
    this.name = name;
  };

  animal.prototype.getSound = function() {
    return this.sound === undefined ?  'nothing' : this.sound;
  };


  // create animal type classes
  var dog = new animal("dog");
  dog.prototype.sound = "woof";

  var cat = new animal("cat");
  dog.prototype.sound = "meow";

  var worm = new animal("worm");


  // create specific animals
  var spot = new dog();
  var mittens = new cat();
  var squiggles = new worm();

I want to create instances of JavaScript function and extend the prototype multiple times so that, in my example, specific animals have methods and properties of both their genus and the general animal kingdom.

Unfortunately, it appears after the first instancing, the prototype property no longer exists. I don't want to continue extending it so that the main prototype has all the methods of all animals, a worm and dog should be able to have .dig(), and a cat should be able to have .climb() without the other classes having those methods.

Conversely, I do not want to constantly rebind methods to each instance. Mittens the cat should have the same prototype as the cat class, and should have the exact same function objects as Crookshanks the cat without any extra assignment work being done.

How do I achieve this with my example?

It's very hard to put into words why, but try using `Object.create`: http://jsfiddle.net/ykurmangaliyev/w8Lfyxtr/3/. — Yeldar Kurmangaliyev, Dec 10 '15 at 08:56
Very interesting. That instantiates another prototype as well? — Josh, Dec 10 '15 at 09:03
These two articles may be interesting to you: http://stackoverflow.com/questions/13040684/javascript-inheritance-object-create-vs-new and http://stackoverflow.com/questions/4166616/understanding-the-difference-between-object-create-and-new-somefunction — Yeldar Kurmangaliyev, Dec 10 '15 at 09:03

score 1 · Accepted Answer · answered Dec 10 '15 at 08:56

1

Instead of creating instance of specific animal, i.e.: new animal('dog'); create dog constructor:

var Dog = function() {
    this.sound = 'woof';
};
Dog.prototype = animal.prototype;
new Dog();

Objects has no prototype property, only functions does have.

You can also use Object.create:

Dog.prototype = Object.create(animal.prototype);

answered Dec 10 '15 at 08:56

Rafał Łużyński

7,083
5
26
38

"dog constructor" is an amazing term. I'll try that out. – Josh Dec 10 '15 at 09:02
It appears that just defining prototype manually is the most straightforward way of achieving what I want, based on all the information I received. – Josh Dec 10 '15 at 09:17

score 0 · Answer 2 · answered Dec 10 '15 at 09:05

This might be suitable for your needs:

// create animal class
  var animal =  function(name) {
    this.name = name;
  };

  animal.prototype.getSound = function() {
    return this.sound === undefined ?  'nothing' : this.sound;
  };

  var digger = function(name) {
    animal.call(this, name);
    this.dig = function() {
      ...
    };
  }

  var climber = function(name) {
     animal.call(this, name);
     this.climb = function() {
       ...
     };
  }

  var dog = function() {
  }

  var cat = function() {
  }

  var worm = function() {
  }

  digger.prototype = new animal();
  digger.prototype.constructor = digger;

  climber.prototype = new animal();
  climber.prototype.constructor = climber;

  dog.prototype = new digger("dog");
  dog.prototype.constructor = dog;
  dog.prototype.sound = "woof";

  cat.prototype = new climber("cat");
  cat.prototype.constructor = cat;
  cat.prototype.sound = "meow";

  worm.prototype = new digger("worm");
  worm.prototype.constructor = worm;

  // create specific animals
  var spot = new dog();
  var mittens = new cat();
  var squiggles = new worm();

How to extend a JavaScript prototype object twice?

2 Answers2