JavaScript中的内存模型：堆内存与栈内存的区别与管理

描述
JavaScript中的内存分为堆内存（Heap）和栈内存（Stack），两者在数据存储、生命周期管理和访问方式上有本质区别。理解这两种内存结构对于掌握变量分配、垃圾回收机制以及性能优化至关重要。

解题过程

1. 栈内存（Stack Memory）

• 存储内容：存放基本类型（Number、String、Boolean、Null、Undefined、Symbol、BigInt）的值和引用类型的地址指针
• 管理方式：自动分配固定大小内存，遵循LIFO（后进先出）原则
• 生命周期：与执行上下文绑定，函数调用时创建栈帧，执行完毕立即释放
• 示例分析：

  function calculate() {
    let a = 10;        // 基本类型，值直接存栈中
    let b = 20;
    return a + b;
  }
  // 函数执行结束后，a和b的栈内存立即释放
  

2. 堆内存（Heap Memory）

• 存储内容：存放引用类型（Object、Array、Function等）的实际数据
• 管理方式：动态分配内存空间，大小不固定
• 生命周期：通过垃圾回收机制（GC）自动管理，无引用时被回收
• 内存结构示例：

  let user = { name: "John", age: 30 };
  // 栈中存储user变量和指向堆内存的地址指针
  // 堆中存储实际对象数据{name: "John", age: 30}
  

3. 赋值操作的内存表现

• 基本类型赋值（栈内存操作）：

  let x = 5;
  let y = x;  // 在栈中创建新值5的副本
  y = 10;     // 修改y不影响x
  console.log(x); // 5（保持不变）
  

• 引用类型赋值（堆内存地址复制）：

  let obj1 = { count: 1 };
  let obj2 = obj1;    // 复制堆内存地址，指向同一对象
  obj2.count = 2;     // 修改共享对象
  console.log(obj1.count); // 2（同步变化）
  

4. 函数参数传递机制

• 基本类型参数：传递值的副本

  function changePrimitive(val) {
    val = 100;  // 修改栈中的副本
  }
  let num = 50;
  changePrimitive(num);
  console.log(num); // 50（原值不变）
  

• 引用类型参数：传递地址指针的副本

  function changeReference(obj) {
    obj.value = "modified";  // 通过地址修改堆中数据
  }
  let item = { value: "original" };
  changeReference(item);
  console.log(item.value); // "modified"（原对象被修改）
  

5. 内存管理实践要点

• 栈溢出预防：避免无限递归

  // 错误示例：栈溢出
  function infiniteRecursion() {
    infiniteRecursion();  // 不断创建栈帧导致溢出
  }
  

• 堆内存优化：及时解除引用

  let largeData = new Array(1000000).fill("data");
  // 使用完成后主动释放
  largeData = null;  // 解除引用，帮助GC回收
  

• 闭包内存管理：

  function createHeavyClosure() {
    let largeObj = new Array(1000000);
    return function() {
      // 闭包持有引用，largeObj无法被回收
      return largeObj.length;
    };
  }
  // 需要时手动解除引用
  let closure = createHeavyClosure();
  closure = null;  // 释放闭包及其引用的对象
  

6. 调试与监控工具

• Chrome DevTools Memory面板查看堆快照
• Performance Monitor实时监控内存使用
• 使用performance.memoryAPI获取内存信息（浏览器限制）

通过理解堆栈内存的区别，可以更有效地编写内存友好的JavaScript代码，避免内存泄漏和性能问题。