JavaScript 简单范例与复杂范例-复杂范例的内存分配

深入明白JavaScript中的简单范例（根本数据范例）和复杂范例（引用数据范例）如安在内存中存储对于编写高效、无误的代码至关重要。本文将专注于探究复杂范例的内存分配机制，即堆（Heap）内存，并通过实例说明这些概念的实际应用。
内存根本：栈与堆

栈（Stack）

栈是一种后进先出（LIFO, Last In First Out）的数据结构，通常用于存储函数调用信息和局部变量。由于其结构特性，栈操作非常快速且直接，访问栈顶元素的时间复杂度为O(1)。简单范例的数据值就存储在栈内存中。
堆（Heap）

堆是一种动态分配的内存区域，得当于存储大小不固定的对象或需要长期存在的数据。与栈不同，堆上的数据没有特定的顺序，因此访问速度较慢，但灵活性更高。复杂范例的值实际存储在堆中，而栈中仅保存指向堆内存的引用地点。

• 特点：
  
  
  
  • 存储复杂范例值。
    
  • 所有线程共享同一块堆内存。
    
  • 动态分配，管理相对复杂。
    
  
  

复杂范例的内存分配

JavaScript中的复杂范例包括：

• Object
  
• Array
  
• Function
  
• 其他自定义对象
  

复杂范例的值是按引用传递的，这意味着当一个复杂范例的值被赋给另一个变量时，实际上是创建了一个新的引用，指向同一个堆内存地点。
示例1：对象的赋值

1. let obj1 = { name: "Alice" };
2. let obj2 = obj1;
4. console.log(obj1); // 输出: { name: 'Alice' }
5. console.log(obj2); // 输出: { name: 'Alice' }
7. obj2.name = "Bob";
9. console.log(obj1.name); // 输出: Bob
10. console.log(obj2.name); // 输出: Bob

复制代码

在这个例子中，obj1和obj2都指向了堆中同一个对象，所以修改此中一个对象会影响另一个对象。
示例2：比力复杂范例的值

1. let arr1 = [1, 2, 3];
2. let arr2 = [1, 2, 3];
4. console.log(arr1 === arr2); // 输出: false
6. let obj1 = { key: "value" };
7. let obj2 = obj1;
9. console.log(obj1 === obj2); // 输出: true

复制代码

这里，尽管arr1和arr2包含雷同的元素，但由于它们是不同的对象实例，各自的引用地点不同，所以比力结果为false。而obj1和obj2指向同一个对象，因此比力结果为true。


深拷贝 vs 浅拷贝

由于复杂范例是按引用传递的，直接赋值不会复制对象本身，而是复制了引用。为了创建对象的独立副本，我们需要利用深拷贝技能。
浅拷贝

浅拷贝只复制对象的第一层属性，如果对象中含有嵌套的对象或数组，则复制的是这些嵌套对象的引用，而不是完整的副本。

1. let original = { a: 1, b: { c: 2 } };
2. let shallowCopy = Object.assign({}, original);
4. original.b.c = 3;
6. console.log(shallowCopy.b.c); // 输出: 3

复制代码

深拷贝

深拷贝则会递归地复制整个对象树，确保新对象与原对象完全独立。

1. let original = { a: 1, b: { c: 2 } };
2. let deepCopy = JSON.parse(JSON.stringify(original));
4. original.b.c = 3;
6. console.log(deepCopy.b.c); // 输出: 2

复制代码

注意：利用JSON.parse(JSON.stringify())进行深拷贝存在范围性，比方它不能处理函数、循环引用等特殊情况。


实际应用场景

场景1：对象的持久化

当你需要保存对象的状态以便后续恢复时，深拷贝是非常有用的。

1. function saveState(state) {
2.     return JSON.parse(JSON.stringify(state));
3. }
5. let gameState = { level: 1, score: 100, player: { name: "Hero", health: 100 } };
6. let savedState = saveState(gameState);
8. gameState.level = 2;
9. gameState.player.health = 80;
11. console.log(savedState); // 输出: { level: 1, score: 100, player: { name: 'Hero', health: 100 } }

复制代码

场景2：函数作为参数传递

复杂范例也可以作为参数传递给函数，在这种情况下，传入的是对象的引用。

1. function updatePlayer(player) {
2.     player.health -= 10;
3. }
5. let player = { name: "Hero", health: 100 };
7. updatePlayer(player);
9. console.log(player.health); // 输出: 90

复制代码

结语

感谢您的阅读！如果你有任何问题或想分享本身的履历，请在品评区留言交流！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。