Class object in one array gets changed when I create a class object of something else

Question

To keep it short and let the example speak for itself.

I create a object and print it out (it's OK), I create more objects (of the same type) and print out the first object again, now it shows the data of the last object created.

Then I create a a different object from a different class and print the original first object out again and it returns the data from the newly created object.

JSFiddle

var uiElements = [];
uiElements.borders = [];
uiElements.buttons = [];
uiElements.text = [];

var mainStats = [];
mainStats.money = 0;
mainStats.pots = [];
mainStats.herbs = [];

var xOffSet = 10;
var yOffSet = 10;

$(document).ready(function() {

    createUI();

});

function createUI()
{

    mainStats.herbs.types = [];
    mainStats.herbs.types[0] = "Blue";
    mainStats.herbs.types[1] = "Blood vine";
    mainStats.herbs.types[2] = "Heg flower";
    mainStats.herbs[mainStats.herbs.types[0]] = createHerb(mainStats.herbs.types[0], "herb", 60, 0.2, 10, "Basic blue herb", 1, true);

  //CORRECT
    alert(mainStats.herbs[mainStats.herbs.types[0]].name +" "+ mainStats.herbs[mainStats.herbs.types[0]].tier)

    mainStats.herbs[mainStats.herbs.types[1]] = createHerb(mainStats.herbs.types[1], "herb", 200, 0.4, 40, "Blood red tree vine", 1, true);
    mainStats.herbs[mainStats.herbs.types[2]] = createHerb(mainStats.herbs.types[2], "herb", 390.4, 0.2, 202.5, "Crescent shape flower", 1, true);

    mainStats.herbs.types[3] = "Black rose";
    mainStats.herbs[mainStats.herbs.types[3]] = createHerb(mainStats.herbs.types[3], "herb", 60, 0.2, 10, "Very dark rose", 2, true);

    mainStats.pots.types = [];
    mainStats.pots.types[0] = "Earthen";
    //mainStats.pots[mainStats.pots.types[0]] = [];
    //mainStats.pots[mainStats.pots.types[0]].color = "#654321";

//WRONG
    alert(mainStats.herbs[mainStats.herbs.types[0]].name +" "+ mainStats.herbs[mainStats.herbs.types[0]].tier)

  createPot(mainStats.pots.types[0], 1, 1, null);

//VERY WRONG
    alert(mainStats.herbs[mainStats.herbs.types[0]].name +" "+ mainStats.herbs[mainStats.herbs.types[0]].tier)

}

function createPot(name, tier, growthAccelerator, herb)
{
    this.name = name;
    this.tier = tier;
    this.growthAccelerator = growthAccelerator;
    this.herb = herb;
    this.timeLeft = 0;

    return this;
}

function createHerb(name, type, timeToBloom, seedsReturned, salesPrice, description, tier, enabled)
{
    this.name = name;
    this.type = type;
    this.timeToBloom = timeToBloom;
    this.seedsReturned = seedsReturned;
    this.salesPrice = salesPrice;
    this.description = description;
    this.tier = tier;
    this.enabled = enabled;

    return this;
}

function rx(num)
{
    return num+xOffSet;
}

function ry(num)
{
    return num+xOffSet;
}

DAXaholic · Accepted Answer · 2016-08-16 11:27:16Z

4

You don't create objects but just call the functions so their this refers to the global (window) object so that the properties there are overwritten each time and you print out the modified stuff

Create objects with the new keyword like this (by convention, you would then rename createPot just Pot)

var newObj = new createPot(mainStats.pots.types[0], 1, 1, null);
alert(newObj.name);
...

answered Aug 16, 2016 at 11:27

DAXaholic

35.9k6 gold badges84 silver badges77 bronze badges

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

1 Comment

DAXaholic Over a year ago

You really shouldn't - only when you don't ask when something seems strange and just forget about it then there is time to feel stupid.

Collectives™ on Stack Overflow

Class object in one array gets changed when I create a class object of something else

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related