当前位置：文江博客文章教程详情

第170题：什么变量是存储在堆/栈？

发布于 2022-06-02 12:24:34 字数 51 浏览 973 评论 5

堆（Heap）是计算机科学中一类特殊的数据结构的统称。堆通常是一个可以被看做一棵完全二叉树的数组对象。

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

electron-builder 打包错误 cannot find module fs/promises

Maven 中 optional 关键字

Android 的系统架构

Placeholder 表单提示文本兼容性解决方案

Tocible 轻量级文章内导航目录 jQuery 插件

Clone 克隆 CTK 并编译运行测试代码

pulltorefresh.js 网页下拉刷新插件

查看 Linux 内核路由表以及 route 命令的使用

上一篇：第 171 题：了解继承吗？该如何实现继承？

下一篇：在 macOS 中连接 Github 服务

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

时光清浅 2022-05-04 13:46:49

什么变量保存在堆/栈中？

看到这个问题，第一反应表示很简单，基本类型保存在栈中，引用类型保存到堆中✌️✌️✌️，但仅仅就如此简单吗？我们接下来详细看一看

JS 数据类型

我们知道 JS 就是动态语言，因为在声明变量之前并不需要确认其数据类型，所以 JS 的变量是没有数据类型的，值才有数据类型，变量可以随时持有任何类型的数据 。

JS 值有 8 种数据类型：

Boolean：有 true 和 false
Undefined：没有被赋值的变量或变量被提升时的，都会有个默认值 undefined
Null：只有一个值 null
Number：数字类型
BigInt（ES10）：表示大于 253 - 1 的整数
String：字符类型
Symbol（ES6）
Object：对象类型

其中前 7 种数据类型称为基本类型，把最后一个对象类型称为引用类型

JS中的变量存储机制

JS 内存空间分为栈(stack)空间、堆(heap)空间、代码空间。其中代码空间用于存放可执行代码。

栈空间

栈是内存中一块用于存储局部变量和函数参数的线性结构，遵循着先进后出 (LIFO / Last In First Out) 的原则。栈由内存中占据一片连续的存储空间，出栈与入栈仅仅是指针在内存中的上下移动而已。

JS 的栈空间就是我们所说的调用栈，是用来存储执行上下文的，包含变量空间与词法环境，var、function保存在变量环境，let、const 声明的变量保存在词法环境中。

var a = 1
function add(a) {
  var b = 2
  let c = 3
  return a + b + c
}

// 函数调用
add(a)

这段代码很简单，就是创建了一个 add 函数，然后调用了它。

下面我们就一步步的介绍整个函数调用执行的过程。

在执行这段代码之前，JavaScript 引擎会先创建一个全局执行上下文，包含所有已声明的函数与变量：

从图中可以看出，代码中的全局变量 a 及函数 add 保存在变量环境中。

执行上下文准备好后，开始执行全局代码，首先执行 a = 1 的赋值操作，

赋值完成后 a 的值由 undefined 变为 1，然后执行 add 函数，JavaScript 判断出这是一个函数调用，然后执行以下操作：

首先，从全局执行上下文中，取出 add 函数代码
其次，对 add 函数的这段代码进行编译，并创建该函数的执行上下文和可执行代码，并将执行上下文压入栈中

然后，执行代码，返回结果，并将 add 的执行上下文也会从栈顶部弹出，此时调用栈中就只剩下全局上下文了。

至此，整个函数调用执行结束了。

上面需要注意的是：函数（add）中存放在栈区的数据，在函数调用结束后，就已经自动的出栈，换句话说：栈中的变量在函数调用结束后，就会自动回收。

所以，通常栈空间都不会设置太大，而基本类型在内存中占有固定大小的空间，所以它们的值保存在栈空间，我们通过 按值访问 。它们也不需要手动管理，函数调时创建，调用结束则消失。

堆

堆数据结构是一种树状结构。它的存取数据的方式与书架和书非常相似。我们只需要知道书的名字就可以直接取出书了，并不需要把上面的书取出来。

在栈中存储不了的数据比如对象就会被存储在堆中，在栈中只是保留了对象在堆中的地址，也就是对象的引用，对于这种，我们把它叫做 按引用访问 。

举个例子帮助理解一下：

var a = 1
function foo() {
  var b = 2
  var c = { name: 'an' } // 引用类型
}

// 函数调用
foo()

所以，堆空间通常很大，能存放很多大的数据，不过缺点是分配内存和回收内存都会占用一定的时间

JS中的变量存储机制与闭包

对以上总结一下，JS 内存空间分为栈(stack)空间、堆(heap)空间、代码空间。其中代码空间用于存放可执行代码

基本类型：保存在栈内存中，因为这些类型在存中分别占有固定大小的空间，通过按值来访问。
引用类型：保存在堆内存中，因为这种值的大小不固定，因此不能把它们保存到栈内存中，但内存地址大小的固定的，因此保存在堆内存中，在栈内存中存放的只是该对象的访问地址。当查询引用类型的变量时，先从栈中读取内存地址，然后再通过地址找到堆中的值。对于这种，我们把它叫做按引用访问。

闭包

那么闭包喃？既然基本类型变量存储在栈中，栈中数据在函数执行完成后就会被自动销毁，那执行函数之后为什么闭包还能引用到函数内的变量？

function foo() {
  let num = 1 // 创建局部变量 num 和局部函数 bar
  function bar() { // bar()是函数内部方法，是一个闭包
      num++
      console.log(num) // 使用了外部函数声明的变量，内部函数可以访问外部函数的变量
  }
  return bar // bar 被外部函数作为返回值返回了,返回的是一个闭包
}

// 测试
let test = foo()
test() // 2
test() // 3

在执行完函数 foo 后，foo 中的变量 num 应该被弹出销毁，为什么还能继续使用喃？

这说明闭包中的变量没有保存在栈中，而是保存到了堆中：

console.dir(test)

所以 JS 引擎判断当前是一个闭包时，就会在堆空间创建换一个“closure(foo)”的对象（这是一个内部对象，JS 是无法访问的），用来保存 num 变量

注意，即使不返回函数（闭包没有被返回）：

function foo() {
  let num = 1 // 创建局部变量 num 和局部函数 bar
  function bar() { // bar()是函数内部方法，是一个闭包
      num++ 
      console.log(num) // 使用了外部函数声明的变量，内部函数可以访问外部函数的变量
  }
  bar() // 2
  bar() // 3
  console.dir(bar)
}

foo()