Array defined in prototype shared across instances

Question

I'm not sure why js is sharing an array between two instances and not other properties. Anyone care to help with this one? I've tried it without using the prototype, as well. I get the same thing

function ItemScroller() {};

ItemScroller.prototype = {

// var ItemScroller = {

    items: [],
    itemCount: 0,
    position: 0,

    InsertItem: function( item ) {

        this.items.push( item );
        this.itemCount++;
    },

    DisplayPosition: function() {

        this.items[this.position].style.display = "block";
    },

    NextItem: function() {

        if ( this.position < this.itemCount - 1 ) {
            this.items[this.position].style.display = "none";
            this.position++;
            this.items[this.position].style.display = "block";
        }
    },

    PreviousItem: function() {

        if ( this.position != 0 ) {
            this.items[this.position].style.display = "none";
            this.position--;
            this.items[this.position].style.display = "block";
        }
    },

};

Using the above definition,

var one = new ItemScroller();
//var one = Object.create(ItemScroller);
var two = new ItemScroller();
//var two = Object.create(ItemScroller);

for ( var i = 0; i < 4; i++) {
    one.InsertItem("sick");
}

for ( var i = 0; i < 2; i++) {
    two.InsertItem("ok");
}

Then displaying the contents of each --

console.log(one.itemCount); //output: 4
console.log(one.items); //output: [sick, sick, sick, sick, ok, ok]

Above prints 4 and all of the six items in one's array

console.log(two.itemCount); //output: 2
console.log(two.items); //output: [sick, sick, sick, sick, ok, ok]

Above prints 2 and all of the six items in two's array

I'm expecting the following --

console.log(one.itemCount); //output: 4
console.log(one.items); //[sick, sick, sick, sick]

and

console.log(two.itemCount); //output: 2
console.log(two.items); //output: [ok, ok]

Answer 1

You implement was not correct yet. Because you put the items, itemCount and position in prototype. Prototype is the shared memory of instances of Class.

one instanceof ItemController // true
two instanceof ItemController // true
one._proto__ // prototype object of class, included items.
two._proto__ // prototype object of class, included items.
one.items === two.items === ItemController.prototype.items // true, because two of this are pointed to the same reference. It's ItemController.prototype.items

For fixing your issue: put those attributes that you do not want to share in each instant in constructor. The code should be like this:

function ItemScroller() {
   this.items = [];
   this.itemCount = 0;
   this.position = 0;
};

ItemScroller.prototype = {
    InsertItem: function( item ) {
    },

    DisplayPosition: function() {

    },

    NextItem: function() {

    },

    PreviousItem: function() {

    },

};

So, those attributes above will be created for each instance.

one instanceof ItemController // true
two instanceof ItemController // true
one.items === two.items // false
one.__proto__ // prototype of class, now not included item, itemCount, position...

Answer 2

This is going to work:

function ItemScroller(items=[]) {
        this.items=items;
};