Javascript strange behaviour

Question

Can anyone explain this code to me

var ParentClass = function(){
}

var ChildClass = function(){
}

//ChildClass.prototype = new ParentClass();

var child = new ChildClass();
alert(child.constructor === ChildClass); // alert true

But

var ParentClass = function(){
}

var ChildClass = function(){
}

ChildClass.prototype = new ParentClass();

var child = new ChildClass();
alert(child.constructor === ChildClass); // alert false

possible duplicate of [the javascript object model: strange constructor property](http://stackoverflow.com/questions/3901802/the-javascript-object-model-strange-constructor-property). **tl;dr** _"The "constructor" property is a reference to the function that created the object's prototype, not the object itself."_ — Matt Ball, Jun 03 '11 at 15:42

Felix Kling · Accepted Answer · 2011-06-03T15:50:06.203

constructor is a property of the prototype object:

var ChildClass = function(){
}

alert(ChildClass.prototype.constructor == ChildClass); // alert true

The relationship is now like this:

  +-------------------+           +--------------------+
  |                   |           |                    |
  |ChildClass instance|---------->|ChildClass protoype |
  |                   |           |  constructor prop  |
  +-------------------+           +--------------------+

This property points indeed to the ChildClass function.

If you override ChildClass.prototype, then child.constructor will be looked up in the prototype chain and will refer to:

ParentClass.prototype.constructor

as ChildClass.prototype is now an instance of ParentClass which inherits from ParentClass.prototype:

  +-------------------+      +--------------------+      +---------------------+
  |                   |      |                    |      |                     |
  |ChildClass instance| ---> |ParentClass instance| ---> |ParentClass prototype|
  |                   |      |                    |      |   constructor  prop |
  +-------------------+      +--------------------+      +---------------------+

ParentClass.prototype.constructor will of course point to ParentClass.

Thanks. I just thout that constructor is the object's property. Now i know that condstructor is prototype's property. — zim32, Jun 03 '11 at 16:34

Nicola Peluchetti · Answer 2 · 2011-06-03T15:37:35.963

3

Well because in that case you borrow the constructor form ParentClass! It's a pattern i'v read of in the book "javascript patterns" (very good book on javascript).

In fact:

var ParentClass = function(){
}

var ChildClass = function(){
}

ChildClass.prototype = new ParentClass();

var child = new ChildClass();
alert(child.constructor === ParentClass)

Alerts true!

edited Jun 03 '11 at 15:37

answered Jun 03 '11 at 15:30

Nicola Peluchetti

76,206
31
145
192

I thout constructor is the function that constructs this object (child in my place) – zim32 Jun 03 '11 at 15:33
Not in this case: you overwrite the constructor as well. – Nicola Peluchetti Jun 03 '11 at 15:39

score 1 · Answer 3 · answered Jun 03 '11 at 15:34

The behavior here isn't strange at all. Normally you see people do things like this:

var ChildClass = function () {

}

ChildClass.prototype.OftUsedMethod = function () {
  // Something you'll want to be able to do here for every instance of
  // ChildClass, but that you don't want separate instances of the function
  // for.
}

But because you've assigned directly to ChildClass.prototype instead of assigning to a member attribute you've effectively overwritten the base prototype for ChildClass.

score 1 · Answer 4 · answered Jun 03 '11 at 15:37

When you overwrite an object's prototype, it overwrites the constructor as well. You can set it back to the original, however. This is done is various libraries and snippets such John Resig's Simple Inheritance.

var ParentClass = function(){
}

var ChildClass = function(){
}

ChildClass.prototype = new ParentClass();
ChildClass.prototype.constructor = ChildClass;

var child = new ChildClass();
alert(child.constructor === ChildClass); // alert true

Javascript strange behaviour

4 Answers4