Javascript

Problem with using ‘new’ for Inheritance

Imagine you have the following block of code.

function Animal() {
     this.offspring = [];
}

function Dog() {
}

Dog.prototype = new Animal();
Dog.prototype.constructor = Dog;

var d1 = new Dog();
var d2 = new Dog();
var pup = new Dog();

d1.offspring.push(pup);
d2.offspring; // Does 'd2.offspring' have a pup in it?

Well it turns out that d2, in the above case, does have a pup in it !!!

Why you ask ?

Because when you write ‘d1.offspring.push’, browser will do the following in its search for ‘offspring’ array.

Look up ‘offspring’ in d1 -> No match
Look up ‘offspring’ in Dog.prototype -> Match found

Hence, ‘pup’ is pushed into the offspring of ‘Dog.prototype’ and thus d2 has the same copy?

How do we fix this now?

Look up the code below where we use ‘Object.create’ with the combination of ‘Animal.call’.

function Animal() {
     this.offspring = [];
}

function Dog() {
     Animal.call(this); // Use Animal.call(this, args) if any arguments 
                        // exist. Else, use 'apply'
}

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

var d1 = new Dog();
var d2 = new Dog();
var pup = new Dog();

d1.offspring.push(pup); // Dog {offspring: Array[1]}
d2.offspring // Dog {offspring: Array[0]}

There you go !!!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s