高级前端进阶

【进阶1-3期】JavaScript深入之内存空间详细图解

2018-11-29  本文已影响2人  程序员依扬

（关注福利，关注本公众号回复[资料]领取优质前端视频，包括Vue、React、Node源码和实战、面试指导）

本周正式开始前端进阶的第一期，本周的主题是调用堆栈，今天是第3天。

本计划一共28期，每期重点攻克一个面试重难点，如果你还不了解本进阶计划，点击查看前端进阶的破冰之旅

本期推荐文章

前端基础进阶（一）：内存空间详细图解 ，由于微信不能访问外链，点击阅读原文就可以啦。

推荐理由

今天介绍的是JS内存空间，了解内存空间中的堆和栈原理对于理解JS闭包、Event Loop等有很大帮助，本文使用图解形式，即使是第一次接触本文的读者也很容易理解堆栈。文末提供了一个思考题，欢迎加群讨论。

阅读笔记

堆栈的内容和执行顺序我就不说了，前面两篇已经介绍过了。

【进阶1-1期】理解JavaScript 中的执行上下文和执行栈

【进阶1-2期】JavaScript深入之执行上下文栈和变量对象

[图片上传失败...(image-be7894-1543477607420)]

但是今天补充一个知识点：某些情况下，调用堆栈中函数调用的数量超出了调用堆栈的实际大小，浏览器会抛出一个错误终止运行。

对于下面的递归就会无限制的执行下去，直到超出调用堆栈的实际大小，这个是浏览器定义的。

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

现在正式开始今天的主题，内存空间详解

栈数据结构

栈的结构就是后进先出（LIFO），如果读过前面两篇文章应该是相当熟悉了。文中使用乒乓球盒子的结构来解释。

处于盒子中最顶层的乒乓球5，它一定是最后被放进去，但可以最先被使用。而我们想要使用底层的乒乓球1，就必须将上面的4个乒乓球取出来，让乒乓球1处于盒子顶层。

堆数据结构

堆数据结构是一种树状结构。它的存取数据的方式与书架和书非常相似。我们只需要知道书的名字就可以直接取出书了，并不需要把上面的书取出来。JSON格式的数据中，我们存储的key-value可以是无序的，因为顺序的不同并不影响我们的使用，我们只需要关心书的名字。

队列

队列是一种先进先出（FIFO）的数据结构，这是事件循环（Event Loop）的基础结构，事件循环我们会在第8期详解介绍。

变量的存放

首先我们应该知道内存中有栈和堆，那么变量应该存放在哪里呢，堆？栈？

image

在计算机的数据结构中，栈比堆的运算速度快，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: '前端开发' }

内存空间管理

JavaScript的内存生命周期是

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堆内存

往期文章查看

每周计划安排

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

交流

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

http://github.com/yygmind/blog

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

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


上一篇 下一篇

猜你喜欢

热点阅读