Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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!!!

like image 619
Nik So Avatar asked Oct 10 '11 21:10

Nik So


People also ask

Is constructor necessary in JavaScript?

In JavaScript, the Constructor method is invoked when you create an instance of a class. It is also used to initialize objects within a class. However, JavaScript will automatically create and execute an empty constructor if you have not defined any constructor method for a class.

What is the purpose of the class constructor method?

Purpose of Class Constructor Methods A constructor method is a special function that creates an instance of the class. Typically, constructor methods accept input arguments to assign the data stored in properties and return an initialized object.

Why do we need constructors in JavaScript class?

Constructor. The constructor method is a special method for creating and initializing an object created with a class . There can only be one special method with the name "constructor" in a class. A SyntaxError will be thrown if the class contains more than one occurrence of a constructor method.

How many constructors can a class have in JavaScript?

Note: Unlike other object-oriented languages, JavaScript allows only one constructor in a class.


2 Answers

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
like image 64
Christian C. Salvadó Avatar answered Oct 27 '22 11:10

Christian C. Salvadó


I believe this has to do with instantiating Bar with the new keyword. I believe using new will look for Bar.prototype.constructor. Before that line the object linked to Bar.prototype.contructor is of type Foo so when instantiated without that line it will make a Foo object instead of a Bar object.

like image 42
Keith.Abramo Avatar answered Oct 27 '22 12:10

Keith.Abramo