Prototypal Inheritance and setting values

Question

I have this code.

Animal = function(age)
{
    Animal.prototype.age = age;
};
Animal.prototype.constructor = Animal;

Animal.prototype.Walk = function()
{
    console.log("Animal Walking");
};


Pet = function(age, name)
{
    Pet.prototype.name = name;
};
Pet.prototype.constructor = Pet;
Pet.prototype = Object.create(new Animal());


Pet.prototype.DoTricks = function()
{
    console.log(this.name + " is doing tricks!");
};

var pet = new Pet(5, "Barney");

console.log(pet);

All Animals have an age and can walk. Pet Inherits Animal through its prototype. Pets have names and can do tricks, they also have an age and can walk.

How can I organise my code to achieve this behaviour? At the moment I can make it so Pets can walk but their age is left undefined since I cannot pass its age through the constructor.

Many Thanks!

Tip: Don't modify the prototype within a constructor. The prototype is shared among all instances while the constructor should then modify the individual instance (this). — Jonathan Lonowski
– Jonathan Lonowski, Commented Jan 6, 2014 at 16:18
Tip: the Pet.prototype.constructor = Pet; line does nothing when it’s before the part where you set the prototype. Also, Pet = function(age, name) is undeclared and you should use function Pet(age, name) (which also gives it a name and works in strict mode). — Ry-
– Ry- ♦, Commented Jan 6, 2014 at 16:18

Jonathan Lonowski · Accepted Answer · 2014-01-06 16:52:41Z

1

To pass arguments from a constructor to its base, you can execute the base constructor with .call() or .apply():

var Pet = function (age, name) {
    Animal.call(this, age);
    // ...
};

Both will allow the base constructor to be called with the same context (this) value.

You'll also only want to modify the prototype outside of any constructor since its properties and their values will be shared among all instances.

var a = new Animal(10);
var b = new Animal(15);
console.log(a.age); // 15 rather than its own 10

To set additional properties per-instance, you'll want to instead modify the context this:

var Animal = function (age) {
    this.age = age;
};

var Pet = function (age, name) {
    Animal.call(this, age);
    this.name = name;
};

And, regarding constructor properties:

The initial prototype object will already have the constructor property set. So, is isn't usually necessary to set it yourself:

Animal.prototype.constructor = Animal;

Unless you're replacing the initial prototype object completely. For such cases, you'll want to reset the constructor afterwards or it'll be set to initial object that's being replaced.

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

edited Jan 6, 2014 at 16:52

answered Jan 6, 2014 at 16:29

Jonathan Lonowski

124k35 gold badges203 silver badges202 bronze badges

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

1 Comment

Matt Lord Over a year ago

Thanks! This is probably the best answer I've had in days.

Collectives™ on Stack Overflow

Prototypal Inheritance and setting values

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related