理解js运行时的一些概念

Posted 2021-01-01 打静爵

帧：一个帧是一个连续的工作单元。当一个js函数被调用时，运行时环境就会在栈中创建一个帧。帧里保存了特殊的函数参数和局部变量。当函数返回时，帧就被从栈中推出。例如：

function foo(b) {
    var a = 10;
    return a + b + 6;
}
function bar(x) {
    var c = 4;
    return foo(c * x);
}

在声明了foo和bar函数后，执行bar函数

bar(20)

当bar被执行时，运行时将会创建一个包含bar 的参数和所有局部变量的帧。这个帧被添加到了栈的顶部。

bar函数在内部调用了foo的函数，当foo函数被调用时，栈的顶部就又创建了一个新的帧。当foo函数执行完毕后，栈顶部对应的帧就被移除。当bar函数执行完毕后，相应的帧同样被移除。

如果foo函数中又调用了bar函数，那么就创建了一个无限循环的函数调用，就会导致栈被填满最后抛出错误。

 

栈：栈包含了一个信息在执行时的所有步骤（帧）。栈的数据结构为“后进先出”，因此当一个帧被加入到一个栈中时，它总是被添加到最上面，事件循环会从上至下地处理栈中的帧。

 

队列：

队列中包含一个待执行信息的列表，每一个信息都与一个函数相互联系。当栈为空时，队列中的一条信息就会被取出并处理。处理过程为调用该信息所关联的函数，然后将此帧添加到栈的顶部。当栈在此为空时，本次信息处理视为结束。

 

堆： 

堆是一个内存存储空间，它不关注内部储存的内容的保存顺序，堆中保存了所有正在被使用的变量和对象。同时也保存了一些当前作用域已经不会再被用的但还没被垃圾回收机制回收的帧。

 

事件循环：

事件循环内的信息是线性执行的，这意味着它接收到一个信息后，在处理完毕之前，不会再处理其他任何信息。如果栈是空的，那么函数就会立刻执行。当所有的帧被加入栈中后，栈便开始从上至下清除这些帧。最后，栈会被清空，然后下一个信息将会被处理。