Call constructor within another constructor

Question

I found the following example in Dojo: The Definitive Guide:

function Shape(centerX, centerY, color)
{
  this.centerX = centerX;
  this.centerY = centerY;
  this.color = color;
};

function Circle(centerX, centerY, color, radius)
{

  this.base = Shape;
  this.base(centerX, centerY, color);
  this.radius = radius;
};

c = new Circle(10, 20, "blue", 2);

Please explain how this example works. I understand that when we call the constructor Circle, then this refers to the object being created, so it is clear for me why c object has base and radius properties, but how does it get centerX, centerY, color?

score 3 · Accepted Answer · answered Jun 25 '13 at 14:24

Because you've assigned the Shape function to this, and then invoked it by doing this.base().

So here, the base method is the Shape function, and when you do obj.method(), the value of this in method is set to the obj. Therefore the value of this in Shape is your new Circle object.

A more common approach is to use .call() instead of setting the function onto the object.

Shape.call(this, centerX, centerY, color);

This invokes the Shape function with its this value set to whatever you provided as the first argument. The rest of the arguments passed to .call() are just passed on as regular arguments to Shape.

I would guess they used this.base = Shape because there's some other use for this.base elsewhere in the code.

The `base` trick is for implementing something that looks like an object hierarchy without having to manipulate prototypes — SheetJS, Jun 25 '13 at 14:36

score 2 · Answer 2 · answered Jun 25 '13 at 14:25

your Circle gets a new base property which resolves to the function named Shape:

this.base = Shape;

Then, that function is invoked and passed the centerX, centerY, and color parameters. Since your this object never changes, centerX and friends are assigned to the same object which later gets the radius property:

this.base(centerX, centerY, color);
this.radius = radius;

score 2 · Answer 3 · answered Jun 25 '13 at 14:32

In JavaScript, functions are also objects. Shape is a function for adding methods and properties to this, which can be used by the new operator to make Shape objects. It can also be called by Circle to add methods and properties to the object being created by Circle.

Instead of assigning base you could do:

function Circle(centerX, centerY, color, radius)
{
  Shape.call(this, centerX, centerY, color);
  this.radius = radius;
};

score 1 · Answer 4 · edited May 23 '17 at 10:32

It has to do with context of this, if I call window.dosomething() than this in dosomething is window. If I call this.base from the newly created c instance than this is .... the to be created c instance.

this.base happens to be Shape so when it's executed the this context is ... (you guessed; it's the to be created Circle).

The first line of Shape is:

this.centerX = centerX;

Now if you remember what this referred to you might now where the centerX property will be added.

This kind of inheritance doesn't use prototype so console.log(c instanceof Shape) is false and anyting on Shape's prototype isn't part of Circle.

For prototype inheritance you can read the following: Prototypical inheritance - writing up (just the basics)

Call constructor within another constructor

4 Answers4