Question

I’m experiencing some really weird object behaviours at the moment.
I have this template object:

template: {
        trigger: {
            width: 32,
            height: 32,
            delay: 0
        },

        player: {
            direction: {
                value: "right",
                options: "left|right"
            }
        },

        apple: {
            direction: {
                value: "down",
                options: "up|down|left|right"
            }
        }
},

which is an object of an object called layers.
Inside a function in the layers object I add new data (entities) to an empty entities object.

if (!this.entities[which])
{ this.entities[which] = []; }

if (!this.entities[which][id])
{ this.entities[which][id] = {}; }

this.entities[which][id].pos = "0,0";
this.entities[which][id].variables = {};
this.entities[which][id].variables = this.template[which];

So later on when I’m trying to change this.entities[which][id].variables.width for example, every entitie which owns the same template for which gets the same properties as well as the template object which won’t be changed anywhere in the code though. I debugged almost everything and went through every bit of the code. The entitie id’s are also unique.

The part where the object gets changed looks like this:
input.setAttribute("onkeyup", "layers.entities['" + i + "'][" + j + "].variables['" + jj + "'] = this.value; layers.updateEntities();");

Where i is the name of the entitie, j is the id and jj the options name.

You can try it for your self right here:
[removed]

Switch to the entities layer, add two triggers, drag one around, rightclick it and change one of the properties. Both will change although they have different id’s. Also new ones will have these properties.

Because the template itself get’s changed, I thought, that this this.entities[which][id].variables = this.template[which]; somehow links those two object together instead of assigning a “copy” to the left hand variable. I’ve never heard of anything like that though.

Answer 1

Objects in Javascript are passed around by reference so you are right in suspecting the problem was everyone sharing the same set of variables:

var a = {x:1};
var b = a;
b.x = 2;
console.log(a.x); //gives 2

There are many ways to fix your code but a very simple one would be having the templates be “constructor” functions instead of returning the object directly

template: {
    trigger: function(){
        //now we return a brand new object each time.
        return {
            width: 32,
            height: 32,
            delay: 0
        };
    },
    player: function(){ /*...*/},
    apple: function(){ /*...*/}
}

//...

this.entities[which][id].variables = this.template[which]();
                                                       //^^^