Constructors and inheritance in JavaScript

Question

This is about "inheritance" in JavaScript.

Suppose I create a constructor Bird(), and another called Parrot() which I make to "inherit" the properties of Bird by assigning an instance of it to Parrot's prototype, like the following code shows:

function Bird() {
    this.fly = function(){};
}

function Parrot() {
    this.talk = function(){ alert("praa!!"); };
}
Parrot.prototype = new Bird();

var p = new Parrot();

p.talk(); // Alerts "praa!!"
alert(p.constructor); // Alerts the Bird function!?!?!

After I've created an instance of Parrot, why is the .constructor property of it Bird(), and not Parrot(), which is the constructor I've used to create the object?

Tested in modern Firefox, Chrome, IExplorer and Safari with the same result... :p — nandilugio
– nandilugio, Commented Mar 19, 2010 at 17:37

plodder · Accepted Answer · 2010-03-19 23:08:31Z

3

Prototype is an object just like anything else in JavaScript and object assignments are by reference. You just assigned a new bird to parrot's prototype so parrot's prototype is now a bird instance. And a bird's constructor is Bird.

You could fix this with the line

Parrot.prototype.constructor = Parrot;

Another way to do this would be to assign a clone of Bird's prototype to Parrot.prototype

function deepClone(obj) {
    var clone = {};
    for(var i in obj) {
        if(typeof(obj[i])==="object") {
            clone[i] = deepClone(obj[i]);
        } else {
            clone[i] = obj[i];
        }
    }
    return clone;
}


Parrot.prototype = deepClone(Bird.prototype);
Parrot.prototype.constructor = Parrot;

I prefer this because:

1) it saves creating an arbitrary instance of bird (what if something is counting hwo many birds have been created)

2) What if Bird constructor took an argument which was tested in the constructor body? Then calling:

Parrot.prototype = new Bird();

could then cause a null pointer

edited Mar 19, 2010 at 23:08

answered Mar 19, 2010 at 23:03

plodder

2,25618 silver badges19 bronze badges

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

1 Comment

nandilugio Over a year ago

Ah! I finally get it :p Parrot.prototype, a Bird instance with .constructor already defined (equal to Bird), is used in Parrot to create the new instance. What seems strange to me is that .constructor is not automatically overridden. Anyway, knowing it makes it easy to solve (like you proposed). Thanks a lot!

machine elf · Accepted Answer · 2010-03-19 19:12:44Z

1

The constructor refers to the function that creates an instance's prototype (rather than the instance).

answered Mar 19, 2010 at 19:12

machine elf

2271 silver badge4 bronze badges

Collectives™ on Stack Overflow

Constructors and inheritance in JavaScript

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related