Assigning list as prototype acts differently than assigning a simpler object

Question

Can someone please help explain why I'm unable to assign this list as an object prototype in the same manner that I can assign a simpler object property? My understanding was that obj_a & obj_b should each get their their own _amount & _list instances.

This returns unique values for each object... as expected:

const Amount = {
  _amount: 0,
  set_Amount: function (foo) {
    this._amount = foo;
  },
  get_Amount: function () {
    return this._amount;
  },
};

function func_a() {}
function func_b() {}

const obj_a = new func_a()
const obj_b = new func_b()

Object.assign(func_a.prototype, Amount);
Object.assign(func_b.prototype, Amount);

obj_a.set_Amount(1)
obj_b.set_Amount(2)

console.log(obj_a.get_Amount()) //1
console.log(obj_b.get_Amount()) //2

But the arrays are being consolidated here... so they seem to share the same instance??

const objList = {
  _list: [],
  add_item: function (foo) {
    this._list.push(foo)
  },
  list: function () {
    return this._list;
  },
  total: function (){ 
    let x = 0;
    for (let item in this._list) {
      x = Number(x) + Number(this._list[item]);
    }
    return x;
    }
}

function type_a() {}
function type_b() {}

const obj_a = new type_a()
const obj_b = new type_b()

Object.assign(type_a.prototype, objList);
Object.assign(type_b.prototype, objList);

obj_a.add_item(1)
obj_a.add_item(2)
obj_b.add_item(3)
obj_b.add_item(4)

console.log(obj_a.list()) //  [1, 2, 3, 4]
console.log(obj_a.total()) // 10
console.log(obj_b.list()) //  [1, 2, 3, 4]
console.log(obj_b.total()) // 10

user_17804016 · Answer

It's because the array is an object, so even when you merge a clone of objList with Object.assign(), the nested objects are shallow copied, or copied by reference. This is unlike primitives such as numbers, strings, booleans, etc, which are copied by value.

// Create
const baseObj = {
  list: [], // Object
  num: 0 // Primitive
}

// Clone
const testA = {...baseObj}
const testB = {...baseObj} 

// Mutate
testA.num = 5;
testB.list.push(2);

// Test
console.log('Are Objects copied by reference? ', testA.list === testB.list)
console.log('Are Primitives copied by reference? ', testA.num === testB.num)

We need to deep clone objList to create completely new instances of everything inside. We can use lodash's cloneDeep() to do this:

const objList = {
  _list: [],
  add_item: function (foo) {
    this._list.push(foo)
  },
  list: function () {
    return this._list;
  },
  total: function (){ 
    let x = 0;
    for (let item in this._list) {
      x = Number(x) + Number(this._list[item]);
    }
    return x;
    }
}

function type_a() {}
function type_b() {}

Object.assign(type_a.prototype, _.cloneDeep(objList));
Object.assign(type_b.prototype, _.cloneDeep(objList));

const obj_a = new type_a()
const obj_b = new type_b()

obj_a.add_item(1)
obj_a.add_item(2)
obj_b.add_item(3)
obj_b.add_item(4)

console.log(obj_a.list())  
console.log(obj_a.total())
console.log(obj_b.list()) 
console.log(obj_b.total())

Assigning list as prototype acts differently than assigning a simpler object

1 Answers