js中哪些数据在栈上,哪些数据在堆上?

在 JavaScript 中,数据的存储位置(堆或栈)取决于其类型。

1,栈(Stack)存储的数据

栈用于存储**原始类型(Primitive Types)**的值,这些值大小固定且直接存储在栈中,访问速度快。包括:

  • Number (数字):如 423.14
  • String (字符串):如 "张三"
  • Boolean (布尔值):如 truefalse
  • Undefined :如 undefined
  • Null :如 null
  • Symbol (ES6+):如 Symbol('id')

特点:按值访问,直接操作存储的值,赋值时创建副本,互不影响。

javascript 复制代码
let a = 10;
let b = a; // b 是 a 的副本
a = 20;
console.log(b); // 仍为 10

2,堆(Heap)存储的数据

堆用于存储**引用类型(Reference Types)**的值,这些值大小不固定,存储在堆中,栈中仅保存指向堆的地址(引用)。包括:

  • Object (对象):如 { name: "李四" }
  • Array (数组):如 [1, 2, 3]
  • Function (函数):如 function() {}
  • DateRegExpMapSet 等内置对象。

特点:按引用访问,操作的是堆中的对象引用,赋值时共享同一对象,修改时会互相影响。

javascript 复制代码
    let obj1 = { name: "张三" };
    let obj2 = obj1; // obj2 和 obj1 指向同一个堆对象
    obj1.name = "李四";
    console.log(obj2.name); // 输出 "李四"

3,特殊情况与注意事项

  1. 字符串的存储
    • 短字符串(如常量)可能被优化存储在栈中(引擎实现依赖)。
    • 长字符串或动态生成的字符串通常存储在堆中。
  2. 闭包变量
    • 闭包中的变量可能被提升到堆中(如 V8 引擎的优化行为),以避免被栈销毁。
  3. 引擎优化
    • 现代 JS 引擎(如 V8、SpiderMonkey)会动态优化存储方式,例如对小对象进行内联缓存(Inline Caching)或隐藏类(Hidden Class)优化。

4,总结对比表

数据类型 存储位置 访问方式 赋值行为
原始类型(Number等) 按值访问 创建副本,互不影响
引用类型(Object等) 按引用访问 共享同一对象,修改互相影响

5,为什么要区分栈和堆?

  • 性能:栈访问快,但空间有限;堆空间大,但访问稍慢。
  • 内存管理:栈自动释放(函数调用结束时),堆需依赖垃圾回收(GC)。
  • 理解引用行为:避免因共享引用导致的意外修改。
相关推荐
山河木马5 小时前
渲染管线-计算得到gl_Position(顶点着色器)之后续GPU流程
javascript·webgl·图形学
竹林8185 小时前
用 The Graph 查询链上数据实战:从手搓 RPC 到 Subgraph,我的 NFT 项目数据加载快了 10 倍
前端·javascript
kyriewen8 小时前
别再每次都 Google 了:我整理了前端日常最常踩的 10 个 Git 坑,附速查表
前端·javascript·git
SmartBoyW9 小时前
深入ECMAScript规范:彻底搞懂JS隐式类型转换与底层ToPrimitive机制
前端·javascript
用户852495071849 小时前
解密 JavaScript 中的 this:谁才是真正的调用者?
javascript·面试
Heo9 小时前
Vite进阶用法详解
前端·javascript·面试
铁皮饭盒11 小时前
Next.js 风格路由内置?Bun FileSystemRouter 凭啥这么香
javascript
小林ixn12 小时前
别再背八股了!从 5 个真实场景彻底搞懂 JavaScript 的 this
javascript
东风破_12 小时前
JavaScript 面试常考的字符串算法:从反转字符串到回文判断
前端·javascript
巴勒个啦12 小时前
D3.js 入门实战:用力导向图可视化项目依赖关系
javascript