脚本宝典收集整理的这篇文章主要介绍了【进阶1-3期】JavaScript深入之内存空间详细图解，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

function foo() {
    foo();
}
foo();

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



在计算机的数据结构中，栈比堆的运算速度快，Object是一个复杂的结构且可以扩展：数组可扩充，对象可添加属性，都可以增删改查。将他们放在堆中是为了不影响栈的效率。而是通过引用的方式查找到堆中的实际对象再进行操作。所以查找引用类型值的时候先去栈查找再去堆查找。

几个问题

问题1：

VAR a = 20;
var b = a;
b = 30;

// 这时a的值是多少？

问题2：

var a = { name: '前端开发' }
var b = a;
b.name = '进阶';

// 这时a.name的值是多少

问题3：

var a = { name: '前端开发' }
var b = a;
a = null;

// 这时b的值是多少

现在来解答一下，三个问题的答案分别是20、‘进阶’、{ name: '前端开发' }

• 对于问题1，a、b都是基本类型，它们的值是存储在栈中的，a、b分别有各自独立的栈空间，所以修改了b的值以后，a的值并不会发生变化。
• 对于问题2，a、b都是引用类型，栈内存中存放地址指向堆内存中的对象，引用类型的复制会为新的变量自动分配一个新的值保存在变量对象中，但只是引用类型的一个地址指针而已，实际指向的是同一个对象，所以修改b.name的值后，相应的a.name也就发生了改变。
• 对于问题3，首先要说明的是null是基本类型，a = null之后只是把a存储在栈内存中地址改变成了基本类型null，并不会影响堆内存中的对象，所以b的值不受影响。

内存空间管理

JavaScript的内存生命周期是

• 1、分配你所需要的内存
• 2、使用分配到的内存（读、写）
• 3、不需要时将其释放、归还

JavaScript有自动垃圾收集机制，最常用的是通过标记清除的算法来找到哪些对象是不再继续使用的，使用a = null其实仅仅只是做了一个释放引用的操作，让 a 原本对应的值失去引用，脱离执行环境，这个值会在下一次垃圾收集器执行操作时被找到并释放。

在局部作用域中，当函数执行完毕，局部变量也就没有存在的必要了，因此垃圾收集器很容易做出判断并回收。但是全局变量什么时候需要自动释放内存空间则很难判断，因此在开发中，需要尽量避免使用全局变量。

思考题

var a = {n: 1};
var b = a;
a.x = a = {n: 2};

a.x     // 这时 a.x 的值是多少
b.x     // 这时 b.x 的值是多少

参考

前端基础进阶（一）：内存空间详细图解

解读 JavaScript 之引擎、运行时和堆栈调用

JavaScript变量——栈内存or堆内存

往期文章查看

• 【进阶1-1期】理解JavaScript 中的执行上下文和执行栈
• 【进阶1-2期】JavaScript深入之执行上下文栈和变量对象
• 【进阶1-3期】JavaScript深入之内存空间详细图解
• 【进阶1-4期】JavaScript深入之带你走进内存机制制
• 【进阶1-5期】JavaScript深入之4类常见内存泄漏及如何避免
• 【进阶2-1期】深入浅出图解作用域链和闭包

每周计划安排

每周面试重难点计划如下，如有修改会通知大家。每周一期，为期半年，准备明年跳槽的小伙伴们可以把本公众号置顶了。

• 【进阶1期】 调用堆栈
• 【进阶2期】 作用域闭包
• 【进阶3期】 this全面解析
• 【进阶4期】 深浅拷贝原理
• 【进阶5期】 原型PRototyPE
• 【进阶6期】 高阶函数
• 【进阶7期】 事件机制
• 【进阶8期】 Event Loop原理
• 【进阶9期】 Promise原理
• 【进阶10期】Async/Await原理
• 【进阶11期】防抖/节流原理
• 【进阶12期】模块化详解
• 【进阶13期】ES6重难点
• 【进阶14期】计算机网络概述
• 【进阶15期】浏览器渲染原理
• 【进阶16期】webpack配置
• 【进阶17期】webpack原理
• 【进阶18期】前端监控
• 【进阶19期】跨域和安全
• 【进阶20期】性能优化
• 【进阶21期】VirtualDom原理
• 【进阶22期】Diff算法
• 【进阶23期】MVVM双向绑定
• 【进阶24期】Vuex原理
• 【进阶25期】redux原理
• 【进阶26期】路由原理
• 【进阶27期】VueRouter源码解析
• 【进阶28期】ReactRouter源码解析

交流

本人GIThub链接如下，欢迎各位Star

http://github.com/yygmind/blog

我是木易杨，网易高级前端工程师，跟着我每周重点攻克一个前端面试重难点。接下来让我带你走进高级前端的世界，在进阶的路上，共勉！

如果你想加群讨论每期面试知识点，公众号回复[加群]即可




脚本宝典总结

以上是脚本宝典为你收集整理的【进阶1-3期】JavaScript深入之内存空间详细图解全部内容，希望文章能够帮你解决【进阶1-3期】JavaScript深入之内存空间详细图解所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。