变异对象属性给出保留值而不是修改后的值答案

【问题标题】：Mutating Object property giving the preserved value not the modified one变异对象属性给出保留值而不是修改后的值
【发布时间】：2022-10-23 19:09:33
【问题描述】：

我通过改变属性值来玩弄 JavaScript 对象并找到这个观察结果。

问题陈述：我在函数内改变对象属性值并返回对象，但不知何故它保留了以前的值而不给出更新的值。

const obj = { prop: 5 }

const mutatingObjectFunction = () => {
  let temp = obj.prop;
  obj.prop = 10;
  return temp;
}

console.log(mutatingObjectFunction()); // 5

为什么它返回 5 而不是 10？

如果我将直接将对象而不是其属性分配给临时变量，那么它会给我更新的值。

const obj = { prop: 5 }

const mutatingObjectFunction = () => {
  let temp = obj;
  obj.prop = 10;
  return temp;
}

console.log(mutatingObjectFunction().prop); // 10

为什么在 temp 变量中传递整个 object 或对象 property 时行为会有所不同？

【问题讨论】：

分配obj.prop = 10后定义temp = obj.prop；
@ zer00ne 在这种情况下，它会给我更新的，但我的问题是为什么它没有在上面的代码 sn-p 中给出变异值。为什么它在两个代码 sn-ps 中的行为不同。

标签： javascript object

【解决方案1】：

您不能在 JS 中通过引用传递原始属性。所以你传递给temp 的不是obj.prop，而是5。

但是，当您传递一个对象时，您传递的是对同一对象实例的引用，因此该对象的变异可以反映在对它的所有引用中。

let testObj = [] // Arrays are objects too

let a = {obj : testObj}
let temp = a.obj // temp is now a reference to the same array

a.obj.push(1)
temp.push(2)

console.log(temp)

let a = {obj: {value: 5}} // We use an object, {value: 5}
let temp = a.obj // temp is now a reference to our object
a.obj.value++
temp.value++
console.log(temp.value) // 7

【讨论】：

【解决方案2】：

根据这里的 JavaScript let temp = obj; 您是否克隆了引用object 的object。如果你想克隆object，你应该使用像let temp = {...obj};这样的Spread运算符

根据您的第二个示例，您正在引用一个对象。因此，如果您更改了实际对象值，它也会影响引用的 temp 值

但是在第一个示例中，您没有分配完整的object，而是分配了对象的特定值。因此，您在这里应对价值let temp = obj.prop;。所以当实际值改变时它不会受到影响

【讨论】：