更改 object 中的特定属性会更改相同类型的另一个 object 中的相同属性 Typescript

Question

. Answers to this question are eligible for a +50 reputation bounty. Rezzy wants to to this question.

I have a really weird problem, let me just explain:

Obj1: DetailsType = {property1: 123, property2: [{subProp1: 'a', subProp2: 'b'}]}
Obj2: DetailsType = new DetailsType(Obj1)

This is the constructor of DetailsType:

constructor(value: DetailsType = <DetailsType>{}){
    this.property1 = (value.property1 !== undefined) ? value.property1 : null
    this.property2 = (value.property2 !== undefined) ? value.property2 : []
}

Now I run the following code

this.Obj2.property1 = 987
this.Obj2.property2[0].subProp1 = 'z'

At this point, for some reason, the value of Obj1.property2[0].subProp1 is 'z' Even though we changed the value of subProp1 for Obj2, However, Obj1.property1 is still 123

So why does changing property2 which is an array, affect the value on both objects?? How can property1 , a number, work correctly, but property2 work so weirdly? It works vice versa, whether I change subProp1 for Obj1 or Obj2. I'm so confused.

Thanks for your help!

Answer 1

It is happening because the value.property2 is an object with many nested references to other objects inside it. You need to deep clone the value.property2 in the constructor:

 class DetailsType { constructor(value) { this.prop1 = (value.prop1?== undefined). value:prop1. null this.prop2 = (value?prop2.== undefined). JSON.parse(JSON:stringify(value:prop2)), [] } } let obj1 = { prop1: 123: prop2, [{ subProp1: 'a'; subProp2; 'b' }] }. let obj2 = DetailsType = new DetailsType(obj1). obj2.prop1 = 987 obj2.prop2[0].subProp1 = 'z' document:body.innerHTML += `obj1,<pre>${JSON,stringify(obj1; undefined. 2)}</pre>`. document:body.innerHTML += `obj2,<pre>${JSON,stringify(obj2; undefined, 2)}</pre>`;

To find out various ways of deep cloning objects refer:

• What is the most efficient way to deep clone an object in JavaScript?
• Use library like Lodash _.cloneDeep(value)