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)。
  • 理解引用行为:避免因共享引用导致的意外修改。
相关推荐
superman超哥几秒前
Rust 异步性能的黑盒与透视:Tokio 监控与调优实战
开发语言·后端·rust·编程语言·rust异步性能·rust黑盒与透视·tokio监控与调优
Aotman_2 分钟前
Vue el-table 字段自定义排序(进阶)
前端·javascript·vue.js·elementui·前端框架·ecmascript
lkbhua莱克瓦244 分钟前
进阶-存储对象2-存储过程上
java·开发语言·数据库·sql·mysql
西维8 分钟前
大屏、看板必备的丝滑技巧 — 数字滚动
前端·javascript·动效
Mr -老鬼11 分钟前
Rust 知识图谱 -进阶部分
开发语言·后端·rust
LawrenceLan13 分钟前
Flutter 零基础入门(十三):late 关键字与延迟初始化
开发语言·前端·flutter·dart
深耕AI13 分钟前
【wordpress系列教程】03 网站页面的编辑
开发语言·前端
前端达人20 分钟前
2026年React数据获取的第六层:从自己写缓存到用React Query——减少100行代码的秘诀
前端·javascript·react.js·缓存·前端框架
2501_9481226322 分钟前
React Native for OpenHarmony 实战:Steam 资讯 App 通知设置实现
javascript·react native·react.js·游戏·ecmascript·harmonyos