CODEWITHSUNDEEP
javascriptjavascript-objects
user4030
user4030

Reputation: 1

JavaScript new objects inside objects duplicating

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

Upvotes: 0

Views: 142

Answers (2)

user4030
user4030

Reputation: 1

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;

Upvotes: 0

LoveAndCoding
LoveAndCoding

Reputation: 7947

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

Upvotes: 1

Related Questions