javascript - 在 Object 的情况下，Javascript 重新分配和引用如何工作？需要深入解释吗？

Question

这似乎是一件很常见的事情，但有点令人困惑。我被困在两种情况下并试图了解这里发生的事情。

场景一

let obj2 = {b:{c:{d:4}}}
let obj1 = {a:obj2['b']}

obj2['b'] =9

console.log(obj1)// --- > { a: { c: { d: 4 } } }
console.log(obj2)// --- > { b: 9 }

当我更改 obj2['b'] 的值时，我期望 obj1 也会更改，因为 obj1['a'] 是也引用相同的内存位置，但它没有。

场景二

let obj2 = {b:{c:{d:4}}}
let obj1 = {a:obj2['b']}

obj2['b']['c'] =9

console.log(obj1)// --- > { a: { c: 9 } }
console.log(obj2)// --- > { b: { c: 9 } }

当我更改 obj2['b']['c'] 的值时 obj1['a']['c'] 的值也会更改，因为它是引用相同的内存位置。据我了解，这是预期的行为。

我想要场景 1 的解释，为什么它没有更改 obj1 的值？

Answer 1

我认为一些图表在这里可能很有用，有助于说明正在发生的事情。在您的第一个代码块中，在执行前两行代码后，您会遇到如下情况:

请注意，对象 1 和 2 中的键 b 和 a 都存储了对内存中同一对象的引用。第三行执行后，您会遇到以下情况:

如您所见，obj2 的 b 键现在包含值 9，并且不再包含对该对象的引用。但是，obj1 仍然 持有对该对象的引用。因此，当您记录 obj1 时，您仍然会看到嵌套对象的 c 和 d 属性。

---

但是，对于情况二，您的情况略有不同。执行前两行代码后，您将得到与此答案的第一张图片所示相同的图表。但是，一旦第 3 行执行，您的图表将变为:

在这种情况下，对象 1 和 2 的键 a 和 b 仍然在内存中存储对同一对象的引用(不同于以前的场景)。这一次，它们在内存中指向的对象被更新，因此 c 键的值不再是对内存中对象的引用，而是 value 9。因此，当您同时记录 obj1 和 obj2 时，您会看到相同嵌套对象。

以上图表由pythontutor生成在 ES6 可视化工具下。