Javascript object constructor - strange behaviour

Question

I've been learning Javascript's prototype inheritance, and I've got the following in a tag in the body of a html page:

function F() {}
//F.prototype = {a:"hello"};
var x = new F();
document.write(x.constructor);

This results in the following printout in the browser:

function F() { }

However , if I uncomment the second line, the following results:

function Object() { [native code] }

Nevertheless, x is still inheriting from the F's prototype, since when I change the last line to the following...

document.write(x.a);

...I get the following printout:

hello

I've tried this in Firefox and Safari, and the same thing happens in both.

Does anyone have any idea what on earth is going on here?

What's so strange about this? Looks like normal JavaScript to me. — kevin628
– kevin628, Commented Aug 1, 2012 at 15:09

Felix Kling · Accepted Answer · 2012-08-01 15:15:50Z

1

Each object has a constructor property in its prototype chain, since each object ultimately inherits from Object.prototype.

Since you set a plain object as prototype of F, x.constructor is now referring to the constructor property of that object, which refers to Object.prototype.constructor.

The prototype chain looks like this:

x -> F.prototype -> Object.prototype

and since neither x nor F.prototype have a constructor property, the value of Object.prototype.constructor is returned.

The value of F.prototype before you override it is something like:

F.prototype = {
    constructor: F;
};

i.e. it has a constructor property. That's why you should always set constructor properly if you override the prototype:

F.prototype = {a:"hello"};
F.prototype.constructor = F;

edited Aug 1, 2012 at 15:15

answered Aug 1, 2012 at 15:10

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

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

2 Comments

user924731 Over a year ago

So x has inherited the constructor property from {a:"hello"} in the same way that it inherited the a property? So does this mean that x.constructor.prototype is of absolutely no use for traversing inheritance trees?

Felix Kling Over a year ago

@user924731: I'm not quite sure what you mean, but maybe my edit clarifies things. If you override the prototype, make sure you set the constructor function properly.

user1106925 · Accepted Answer · 2012-08-01 15:10:20Z

0

It's because you've eliminated the default .constructor property when you replaced the original .prototype object.

So now, when you look for a .constructor property it continues down the prototype chain of the given .prototype object, until it finds one, which it'll get from the default Object.prototype.

When a .prototype object has been replaced, some people like to reassign the missing .constructor...

function F() {}
F.prototype = {a:"hello"};
F.prototype.constructor = F;

answered Aug 1, 2012 at 15:10

user1106925

3 Comments

user924731 Over a year ago

Ok. things I had read suggested that you traversed the inheritance tree of an object, x by using x.constructor.prototype, so I assumed that the constructor property would not be overridden.

user1106925 Over a year ago

@user924731: Yeah, the .constructor property is a default property that is provided directly on the default F.prototype object for you. If you destroy the default F.prototype object, you're also losing any properties it had. That's why it needs to be added in manually.

user1106925 Over a year ago

@user924731: Not a problem. :)

Collectives™ on Stack Overflow

Javascript object constructor - strange behaviour

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related