详解JavaScript的内存空间、赋值和深浅拷贝

在JavaScript中，理解内存空间、赋值和拷贝是非常重要的。本攻略将详细解释这些概念，并提供示例来帮助理解。

内存空间

在JavaScript中，所有的变量和对象都存储在内存中。内存空间可以分为栈内存和堆内存。

• 栈内存：用于存储基本类型的值，如数字、布尔值和字符串等。栈内存的分配和释放速度很快，但容量较小。
• 堆内存：用于存储引用类型的值，如对象和数组等。堆内存的分配和释放速度较慢，但容量较大。

当我们声明一个变量时，会在栈内存中分配一块空间来存储该变量的值。如果该变量是一个引用类型的值，那么实际的值将存储在堆内存中，而栈内存中存储的是一个指向堆内存的引用。

赋值

在JavaScript中，赋值操作是将一个值复制给一个变量。对于基本类型的值，赋值是将值本身复制给变量。而对于引用类型的值，赋值是将引用复制给变量。

示例1：

let a = 10;
let b = a;
a = 20;

console.log(a); // 输出 20
console.log(b); // 输出 10

在上面的示例中，变量 a 被赋值为 10，然后将 a 的值赋给变量 b。当 a 的值改变为 20 时，b 的值不受影响，因为它们存储的是不同的值。

示例2：

let obj1 = { name: 'John' };
let obj2 = obj1;
obj1.name = 'Jane';

console.log(obj1.name); // 输出 'Jane'
console.log(obj2.name); // 输出 'Jane'

在上面的示例中，变量 obj1 存储了一个对象，然后将 obj1 的引用赋给变量 obj2。当修改 obj1 的属性时，obj2 也会受到影响，因为它们引用的是同一个对象。

深浅拷贝

深拷贝和浅拷贝是用于复制引用类型值的概念。

• 浅拷贝：只复制引用，不复制实际的值。新对象和原对象共享同一块内存空间。
• 深拷贝：复制引用和实际的值。新对象和原对象拥有各自独立的内存空间。

示例3：

let obj = { name: 'John', age: 25 };
let shallowCopy = obj;
let deepCopy = JSON.parse(JSON.stringify(obj));

obj.name = 'Jane';

console.log(obj.name); // 输出 'Jane'
console.log(shallowCopy.name); // 输出 'Jane'
console.log(deepCopy.name); // 输出 'John'

在上面的示例中，shallowCopy 是浅拷贝，它和 obj 共享同一块内存空间，所以当修改 obj 的属性时，shallowCopy 也会受到影响。而 deepCopy 是深拷贝，它拥有独立的内存空间，所以不受 obj 的影响。

需要注意的是，深拷贝有时候会导致循环引用的问题，因为某些对象可能会相互引用。在这种情况下，使用深拷贝可能会导致无限递归，需要特殊处理。

希望这个攻略能够帮助你更好地理解JavaScript的内存空间、赋值和深浅拷贝。如有任何疑问，请随时提问。