making an array of custom objects with default values in JavaScript

Question

So what I'm trying to do is an array of custom objects. So I have a constructor, but I don't pass values through parameters, rather I want to initialise all to 0 and the use getters or setters to retrieve them. Obviously, it doesn't work but I don't know why. Everywhere I looked the object were created by passing values through parameters, so I just guessed.

My constructor

    function Stol()
    {
        var cipsy = 0, kofca = 0, dzus = 0, sypcaj = 0, vrecaj = 0, coko = 0,jedlo = 0, pernik = 0, kava = 0, ucet = 0;
        this.cipsy = cipsy;
        this.kofca = kofca;
        this.dzus = dzus;
        this.sypcaj = sypcaj;
        this.vrecaj = vrecaj;
        this.coko = coko;
        this.jedlo = jedlo;
        this.pernik = pernik;
        this.kava = kava;
        this.ucet = ucet;

        this.reset = reset;
        function reset() {
            this.cipsy = 0;
            this.kofca = 0;
            this.dzus = 0;
            this.sypcaj = 0;
            this.vrecaj = 0;
            this.coko = 0;
            this.jedlo = 0;
            this.pernik = 0;
            this.kava = 0;
            Obrat += this.ucet;
            this.ucet = 0;
        }
        this.addItem = addItem;
        function addItem(type, number) {
            switch (type) {
                case 0 : this.cipsy += number; break;
                case 1 : this.kofca += number; break;
                case 2 : this.dzus += number; break;
                case 3 : this.sypcaj += number; break;
                case 4 : this.vrecaj += number; break;
                case 5 : this.coko += number; break;
                case 6 : this.jedlo += number; break;
                case 7 : this.pernik += number; break;
                case 8 : this.kava += number; break;
            }
        }
        this.getItem = getItem;
        function getItem(type) {
            var item;
            switch (type) {
                case 0 : item = this.cipsy; break;
                case 1 : item = this.kofca; break;
                case 2 : item = this.dzus; break;
                case 3 : item = this.sypcaj; break;
                case 4 : item = this.vrecaj; break;
                case 5 : item = this.coko; break;
                case 6 : item = this.jedlo; break;
                case 7 : item = this.pernik; break;
                case 8 : item = this.kava; break;
            }
            return item;
        }
    }

then here I create the Array

var stol = new Array();
for (var i = 0; i < 14; i++) {
    stol[i] = new Stol();
}

and eventually I want to modify some spans using jQuery like this. #selecStol is a dropdown list (the switch is not completed).

$("#selecStol").change(function(){
            var myStol = stol[$(this).find(":selected").val()];
            for (i = 0; i < 14; i++) {
                switch (i) {
                    case 0 : $("#cipsy").text(myStol.getItem(i));break;

                }
            }
        })

But it doesn't work, and I don't know which part.

Answer 1

That is because this in your getter function isn't what you think.

If you check the this in a dev tool, you'll probly see the window object. To solve that, you can either save the this in a var like that :

function Stol(){
    var self = this;
    //All your variable "this"
    this.getItem = function(type){
        //In this function you use self instead of this
        //ex : case 0 : item = self.cipsy; break;
    }
}

Or the recommanded way, using prototype :

function Stol(){
     //Your things
}

Stol.prototype.getItem = function(type){
    //Now "this" will be Stol object.
}

Note that i've only used getItem function for the answer, but all your others function have the same problem.