CODEWITHSUNDEEP
javascriptjavascript-objects
Vajura
Vajura

Reputation: 1132

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

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;
}

Upvotes: 2

Views: 35

Answers (1)

DAXaholic
DAXaholic

Reputation: 35338

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);
...

Upvotes: 4

Related Questions