JavaScript new objects inside objects duplicating

Question

I'm taking an adventure into the depths of JavaScript and have come across a little problem that I can't get my head around.

Everything I know about programming is self taught, this problem might have some terminology behind it I have never heard of, so I don't know what it would be called.

I'll explain the problem I am experiencing.

I've been writing a framework for HTML5 canvas for displaying 2d and 3d graphics.

As you might expect, I have designed an element class, these elements have positions on the canvas which are built from a vector class I put together.

The problem I'm having is, if I make two "Text" objects, then call a function inside their position object, all the positions of the "Text" objects change to this value:

    var usernameLabel = new C.Text('Username:');
    usernameLabel.position.set(30,30)

    var username = new C.Text('Hello World');
    username.position.set(0,70)

    console.log(usernameLabel.position.x) // 0 when it should be 30

I'm sure there is something I missed, I just can't figure out what.

    C.Text.prototype = new C.Element();

    C.Element.position = new JC.Vector();

Any help would be most appreciated!

This is my full Element class

C.elements = 0;

C.Element = function()
{
    this.id = C.elements ++;

    this.position = new C.Vector();
    this.rotation = new C.Vector();
    this.style = new C.Style();

    this.children = [];
}

C.Element.prototype = {

    constructor : C.Element,

    addChildObject : function( o )
    {
        return this.children.push(o);
    },

    removeChildObject : function( o )
    {
        this.children.splice(o,1);
    }

}

Text class

C.Text = function(string)
{
    this.string = string || '';
}

C.Text.prototype = new C.Element();
C.Text.prototype.constructor = C.Text();

I also have more classes built from C.Element obviously, for example:

C.Rectangle = function(width, height)
{
    this.style.setSize(width,height);
}

C.Rectangle.prototype = new C.Element();
C.Rectangle.prototype.constructor = new C.Rectangle();



var usernameLabel = new C.Text('Username:');
usernameLabel.position.set(30,30) // 0,70?

var username = new C.Text('');
username.position.set(0,70) // 0,70

var rect = new C.Rectangle(20,0);
rect.position.set(30,80) // 90,80?

var rect2 = new C.Rectangle(20,0);
rect2.position.set(90,80) // 90,80

LoveAndCoding · Accepted Answer · 2012-01-08 17:52:59Z

1

From the looks of it, you are declaring position as a 'static' variable on the object, which means it will change. To make it change only on a specific object you need one of the following:

C.Element.prototype.position = new JC.Vector();

or inside a function within the object

this.position = new JC.Vector();

These declarations are for items that are specific to the object, where as the C.Element.position declaration is for something that will be the same in all instances of the object.

Update

Instead of declaring C.Text.prototype = new C.Element(). Try using C.Text.prototype = C.Element.prototype. Hopefully that will fix your problem. Instead of creating a new object to base it on, it bases it directly on the prototype of C.Element

edited Jan 8, 2012 at 17:52

answered Jan 8, 2012 at 17:30

LoveAndCoding

7,9473 gold badges34 silver badges55 bronze badges

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

7 Comments

LoveAndCoding Over a year ago

@user4030 post it to jsBin or jsFiddle and I can take a look at it. It will be hard to read here.

user4030 Over a year ago

I added the full class in the description.

user4030 Over a year ago

Then I'll add my text class aswell:

LoveAndCoding Over a year ago

@user4030 Updated again. This should be a fix. Tested it out with some test code and it worked fine.

user4030 Over a year ago

Now it does not call the constructor. It skips the call to C.Element() constructor and this.position is never added to the object.

|

user4030 · Accepted Answer · 2012-01-09 10:09:07Z

0

I found the answer! Thanks for the help! The solution was to make the parent object do a call

for a reason I don't fully understand.

C.Text = function(string)
{
    C.Object.call(this)

    this.string = string || '';
    return this;
}

C.Text.prototype = new C.Object();
C.Text.prototype.constructor = C.Text;

answered Jan 9, 2012 at 10:09

user4030

13 bronze badges

Collectives™ on Stack Overflow

JavaScript new objects inside objects duplicating

2 Answers 2

7 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Related