why does listing the actual constructor of a class in javascript important

Question

I was reading on javascript garden http://bonsaiden.github.com/JavaScript-Garden/ about prototype in javascript and one of its example goes like this:

function Foo() {
    this.value = 42;
}
Foo.prototype = {
    method: function() {}
};

function Bar() {}

// Set Bar's prototype to a new instance of Foo
Bar.prototype = new Foo();
Bar.prototype.foo = 'Hello World';

// Make sure to list Bar as the actual constructor <-------------------
Bar.prototype.constructor = Bar;

Notice the line that reads Make sure to list Bar as the actual constructor. I really am lost about what this does/is. I have tried making new instances of Bar() with and without the last line. But call "value" or "method" on those instances return the exact same things. So I wonder, what's the need (I assume there must be one) of specifying the constructor?

Thank You!!!

Answer 1

Every function has a prototype property, it's assigned when the function object is created, it points to a newly created object that inherits from Object.prototype, and it has a constructor property, that simply points back to the function itself.

The purpose of the prototype property is to give a way to implement inheritance, using constructor functions. When you call a function with the new operator, it will create a new object that inherits from that constructor's prototype.

Now, the purpose of the constructor property is to have a way to refer back to the constructor that has created an object, for example:

function Foo () {}
// default value of the property:
Foo.prototype.constructor == Foo; // true

This property is inherited by the "instances" of Foo, so you can know which constructor was used to create an object:

var foo = new Foo();
foo.constructor == Foo;

If you assign a new object to the function's prototype, this relationship is lost:

function Bar () {}
Bar.prototype = { inherited: 1 };

Bar.prototype.constructor == Bar;    // false
Bar.prototype.constructor == Object; // true

And it affects also the instances of the function:

var bar = new Bar();
bar.constructor == Bar;    // false
bar.constructor == Object; // true

Another similar case is when you have two or more levels of inheritance using constructors, the most common way is used to denote the inheritance relationship between the functions, is to assign the prototype property of the second level, e.g.:

function Parent() {}

function Child () {}
Child.prototype = new Parent();

The above code has several problems, first, it executes the logic of the parent constructor to create the inheritance relationship, but that's another story, in the above example the constructor property is also affected, since we replace completely the Child.prototype object:

var child = new Child();
child.constructor == Parent; // true

If we replace replace the value of the constructor property of Child.prototype after assigning it, it will show the expected behavior:

function Child() {}
Child.prototype = new Parent();
Child.prototype.constructor = Child;

var child = new Child();
child.constructor == Child; // true