javascript运行时中的堆栈和队列

下面是一个理论上的模型，js引擎着重实现和优化了描述的这几个语义

可视化描述

栈(stack)

var a = 10;
function bar(x) {
  var b = 5;
  fn(x + b);
}
function fn(y) {
  var c = 5;
}
bar(10);

js会以一种执行栈的方式去执行代码，以一种入栈和出栈的方式，后进先出的完成代码执行，用下图表示如下（上下文描述可以忽略，有兴趣的可以参考这篇文章，此文不作讲解）：

堆(heap)

简单点说，就是一块内存区域，用来存储声明的变量、对象，相比栈而言，它是无结构的，而栈(stack)是有结构的。

队列(queue)

一个js运行时包含了一个待处理的消息队列，每一个消息都与一个函数相关联。当栈(stack)拥有足够内存时，从队列中取出一个消息进行处理。这个处理过程包含了调用与这个消息相关联的函数（以及因而创建了一个初始堆栈帧）。

事件循环（event loop）

在处理消息队列的时候，会涉及到事件循环(Event Loop)，用下图很好的描述了整体结构：

对事件循环的原理和js异步和线程感兴趣的，可以读读这篇文章

参考链接

• https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/EventLoop
• http://www.cnblogs.com/wangfupeng1988/p/3989357.html
• http://www.ruanyifeng.com/blog/2014/10/event-loop.html