下面是一个理论上的模型,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)拥有足够内存时,从队列中取出一个消息进行处理。这个处理过程包含了调用与这个消息相关联的函数(以及因而创建了一个初始堆栈帧)。当栈(stack)再次为空的时候,也就意味着消息处理结束。
在处理消息队列的时候,会涉及到事件循环(Event Loop),在游览器中由事件触发线程进行,用下图很好的描述了整体结构:
对事件循环的原理和js异步和线程感兴趣的,可以读读这篇文章