对象和原始值到底存在哪？赋值和传参时，内存里发生了什么？为什么 React 强调“不可变更新”，而Vue3 可以直接修改 ref 的值？这些问题的答案，都藏在 JavaScript 内存的两个核心区域里：栈（Stack） 和 堆（Heap），它们就像生活中的旅馆前台和仓库。

一、旅馆前台 vs 仓库——内存的两个“部门”

我们可以把JavaScript 引擎看作一家旅馆。

1. 栈：旅馆前台

旅馆前台存放的是小件、轻便、存取快速的东西——比如信件、钥匙。前台空间有限，但取放极快。更重要的是，退房（函数执行结束）时，前台的物品会自动被清空，不需要专门打扫。

在 JavaScript 中，栈负责存放：

• 原始值：number、string、boolean、null、undefined、symbol、bigint

• 指向堆中对象的引用地址（也就是对象的“房间号”）

原始值大小固定、生命周期明确（随函数调用产生和销毁），非常适合放在栈里。

2. 堆：仓库

旅馆后面有一个大仓库，存放大件、笨重、需要长期保存的物品——比如家具、行李。仓库空间很大，但存取比前台慢，而且需要专门的人定期去清理长期不用的东西（垃圾回收）。

在 JavaScript 中，堆负责存放：

• 引用类型：对象（Object）、数组（Array）、函数（Function）、闭包变量等

这些数据的大小不固定，可能非常庞大，而且经常需要在函数返回后依然存活（比如被挂载在全局对象上，或者被事件回调引用）。

两者区别：栈像旅馆前台，快而小，存原始值和房间号；堆像仓库，慢而大，存对象本身。

二、原始值与引用值——从前台和仓库的角度理解

1. 原始值：直接存在前台

let age = 25;
let name = 'weedsfly';
let isAdmin = true;

​这些值都直接存储在栈上，每个变量占据一小块固定大小的空间。赋值时，复制的是值本身。

let a = 10;
let b = a;   // 把 a 的值 10 复制一份给 b
b = 20;
console.log(a); // 10，不受影响

a 和 b 各自拥有独立的栈空间，互不干扰。

2. 引用值：存在仓库，前台只留房间号

let user = { name: '张三', age: 30 };

user 变量存在栈上，但存的是对象在堆中的内存地址（房间号）。真正的对象 { name: '张三', age: 30 } 躺在仓库里。

当你“复制”一个引用值时：

const obj = { count: 0 };
obj.count = 1; // 合法，房间号没变
obj = {};      // 报错，尝试更换房间号

another 和 user 拿的是同一个房间号，指向仓库里的同一个对象。无论通过哪个变量去改房间里的东西，另一个变量也能看到变化。

这就是为什么 const 声明的对象内容可以被修改——const 锁住的是栈上的房间号，不是仓库里的物品。

const obj = { count: 0 };
obj.count = 1; // 合法，房间号没变
obj = {};      // 报错，尝试更换房间号

三、函数传参：到底是值传递还是引用传递？

这是一个经典的面试题。从内存模型的角度看，答案很清晰：JavaScript 永远是值传递，但传递的值可能是原始值，也可能是引用地址。

function change(num, obj) {
  num = 100;
  obj.name = 'Changed';
}


let count = 1;
let person = { name: 'Original' };
change(count, person);


console.log(count);  // 1 — 未改变
console.log(person.name); // 'Changed' — 被改变了

function change(obj) {
  obj = { name: 'New' }; // 把房间号换成了另一个
}
let person = { name: 'Original' };
change(person);
console.log(person.name); // 'Original'，外部不受影响

// 错误
const [user, setUser] = useState({ name: '张三' });
user.name = 'weedsfly';
setUser(user); // 引用地址没变，React 认为状态未更新，不会重渲染

从内存的角度，你只改了仓库里的东西，栈上的房间号没变，React 无法察觉。

正确做法是创建一个新对象，替换房间号：

// 正确
setUser({ ...user, name: 'weedsfly' }); // 新对象，新房间号

const original = { user: { name: '张三' } };
const copy = { ...original }; // 浅拷贝：只复制了 user 的房间号
copy.user.name = 'weedsfly';
console.log(original.user.name); // 'weedsfly'，被影响了

五、总结

理解栈和堆，就理解了 JavaScript 数据存储和传递的核心规则。记住这几个要点：

• 栈 存原始值和引用地址，小而快，随函数调用自动清理。

• 堆 存对象和数组，大而灵活，由垃圾回收器管理。

• 赋值和传参都是值复制：原始值复制数据本身，引用值复制房间号。

• React 的不可变更新要求你替换栈上的房间号；Vue 3 的 Proxy 则不用。

• 浅拷贝只复制第一层引用地址，深拷贝才能完全断开引用链。

下次当你写出 setState({ ...prev }) 或者困惑“为什么 const 对象还能被修改”时，不妨想想旅馆前台和仓库的比喻——栈上只是换了一张房卡，仓库里的东西还在那里。