Arrays and Objects In Prototypes - Not Treated as References

Question

I have a prototype object in Javascript, when I initialise a new instance of the prototype and update properties in the prototype, it updates for all elements. I understand that

Answer 1

That's the thing: they are treated as references.

When you do this:

Test.prototype = {
    array: [], // <- This creates a new array and it's being used in all instances
    add: function (value) {
        this.array.push(value)
    }
}

What you want is getting different array instances for different class instances. In that case, simply do this.array = [] in your constructor:

let Test = function () { this.array = []; }

let Test = function () { this.array = []; }

Test.prototype = {
    array: [],
    add: function (value) {
        this.array.push(value)
    }
}

let test1 = new Test();
let test2 = new Test();

test1.add(1);
test1.add(2);

console.log(test1.array);
// => [1, 2]

console.log(test2.array);
// => []

Answer 2

Initialize mutable members in the constructor, not in the prototype. If it's in the prototype, it will be shared between all instances:

let Test = function () {
    this.array = [];
}

Test.prototype = {
    add: function (value) {
        this.array.push(value)
    }
}

let test1 = new Test();
let test2 = new Test();

test1.add(1);
test1.add(2);

console.log(test1.array);
console.log(test2.array);

Answer 3

Define the array on the instance instead of on the prototype:

function Test() {
    this.array = [];
}

Test.prototype.add = function (value) {
    this.array.push(value)
}

Answer 4

I understand that arrays and objects are passed by reference

No, they are not. But they're referenced by object references, which is an entirely different thing,¹ and is indeed the issue you're running into.

and was wondering of a solution that would get you around this?

Do exactly what you did in the ES6 approach: Put it on the object itself, not the prototype:

let Test = function () {
    this.array = [];
};

---

¹ (All that the concepts "pass by reference" and "object reference" have in common is that they both use the word "reference." In the former, it's a reference to a variable [and a concept JavaScript doesn't have]. In the latter, it's a reference to an object.)