Implement pointer behavior: make reassignments of objects or arrays visible to other classes

Question

Consider the following code:

class ClassA {
    constructor(positon, obj) {
        this.position = positon
        this.obj = obj
    }
}
    
class ClassB {
    constructor() {
        this.position = [1, 2]
        this.obj = {
            pos: [1, 2, 3],
            rot: [4, 5, 6]
        }
        this.classAInstance = new ClassA(this.position , this.obj)
    }
}

class ClassC {
    constructor(position, obj) {
        this.obj = obj
        this.position = position
    }

    reassignObj(){
        this.obj = {
            pos: [4, 5, 6],
            rot: [7, 8, 9]
        }
    }

    resetObj() {
        this.obj.pos = [4, 5, 6],
        this.obj.rot = [7, 8, 9]
    }

    reassignPosition() {
        this.position = [3, 4]
    }

    resetPosition() {
        this.position[0] = 3
        this.position[1] = 4
    }
}
        
let fItem = new ClassB()
let other = new ClassC(fItem.position, fItem.obj)
other.resetObj()
other.resetPosition()
console.log('RE-SETTING')
console.log('FITEM', fItem.position, fItem.obj)
console.log('OTHER', other.position, other.obj)
fItem = new ClassB()
other = new ClassC(fItem.position, fItem.obj)
other.reassignObj()
other.reassignPosition()
console.log('RE-ASSINGNING')
console.log('FITEM', fItem.position, fItem.obj)
console.log('OTHER', other.position, other.obj)

When I reset the property, other classes can see the change (the reference copy is not changed). But when I reassign the array or object, other classes don't see the change (the reference copy has changed). As shown in the following output:

//重置
FITEM [ 3, 4 ] { pos: [ 4, 5, 6 ], rot: [ 7, 8, 9 ] }
OTHER [ 3, 4 ] { pos: [ 4, 5, 6 ], rot: [ 7, 8, 9 ] } // 更改对其他类可见
//重新分配
FITEM [ 1, 2 ] { pos: [ 1, 2, 3 ], rot: [ 4, 5, 6 ] }
OTHER [ 3, 4 ] { pos: [ 4, 5, 6 ], rot: [ 7, 8, 9 ] } // 更改对其他类不可见

Is there a way to make changes visible to other classes on reallocation, to implement a pointer behavior where changes are "visible" across many classes holding references?

Answer 1

The solution using getters and setters is as follows:

class ClassC {
    constructor(position, obj) {
        this._obj = obj
        this._position = position
    }

    reassignObj(){
        this.obj = {
            pos: [4, 5, 6],
            rot: [7, 8, 9]
        }
    }

    resetObj() {
        this.obj.pos = [4, 5, 6],
        this.obj.rot = [7, 8, 9]
    }

    reassignPosition() {
        this.position = [3, 4]
    }

    resetPosition() {
        this.position[0] = 3
        this.position[1] = 4
    }

    get obj() {
        return this._obj
    }

    set obj(value) {
        this._obj.pos = value.pos
        this._obj.rot = value.rot
    }

    get position() {
        return this._position
    }

    set position(value) {
        this._position[0] = value[0]
        this._position[1] = value[1]
    }
}