New JavaScript prototype changes constructor

Question

When you create an object with a constructor it has a constructor property pointing to the constructor function:

var Foo = function(foo) {
    this.foo = foo;
}
var myFoo = new Foo(123);
myFoo.constructor === Foo; // true

After creating this object I can change Foo.prototype ...

Foo.prototype.x = 'y';

... or reassign a new prototype object:

Foo.prototype = {
    num: 99
};
myFoo.constructor === Foo; // still true

But if I create a new Foo object after assigning a new object to Foo.prototype its constructor suddenly points to Object:

var myBar = new Foo(321);
myBar.constructor === Foo; // false
myBar.constructor === Object; // wtf?!

Adding new properties to the prototype doesn't produce this effect, you have to do the assignment Foo.prototype = {...}.

I have no idea why creating a new prototype would affect the constructor property. I tested in Chrome, Firefox and Internet Explorer, all with the same result. Can anybody help me understand this?

Use console.dir(myFoo) and console.dir(myBar) and you will see. Note: Assigning a new value to Func.prototype does not affect existing instances of that constructor. Just in the same as var foo = 10; var bar = foo; bar = 5; won't set foo to 5. — Felix Kling
– Felix Kling, Commented Jun 20, 2014 at 21:11
Thanks for the tip with console.dir, that makes things indeed clearer. — wortwart
– wortwart, Commented Jun 23, 2014 at 7:47

SLaks · Accepted Answer · 2014-06-20 21:08:49Z

1

The constructor property of any object is inherited from that object's prototype.

The default prototype object created with any function contains a constructor property that refers to that function, as detailed in the spec.

Your new prototype object doesn't have that constructor property, and instead has its own constructor property inherited from Object.prototype.

answered Jun 20, 2014 at 21:08

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

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

1 Comment

dandavis Over a year ago

that's why in "use strict", you can delete Function.prototype.constructor for security, and they can't get it back.

wortwart · Accepted Answer · 2014-06-23 08:53:55Z

To sum it up:

myFoo.constructor is in fact myFoo.__proto__.constructor.
Creating a new prototype doesn't affect existing objects. In the example above, myFoo.x has the value "y" but myFoo.num is undefined.
Newly created objects use that new prototype, of course, which has no property constructor. Therefore they inherit it. In the example above, myBar.constructor is in fact myBar.__proto__.__proto__.constructor which points to Object.

If you assign a new prototype from an object literal you simply can set a constructor property:

var Foo = function(foo) {
    this.foo = foo;
};
var myFoo = new Foo(123);

Foo.prototype = {
    num: 99,
    constructor: Foo
};
var myBar = new Foo(99);

myBar.constructor === myFoo.constructor; // true

Or, more precisely:

Foo.prototype = {
    num: 99
};
Object.defineProperty(Foo.prototype, "constructor", {
    writable: true,
    configurable: true,
    enumerable: false,
    value: Foo
});

Collectives™ on Stack Overflow

New JavaScript prototype changes constructor

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