JavaScript异步机制（一）调用栈（call stack）

调用栈（call stack）

代码在运行过程中，会有一个叫做调用栈(call stack)的概念。调用栈是一种栈结构,它用来存储计算机程序执行时其活跃子程序的信息。（比如什么函数正在执行，什么函数正在被这个函数调用等等信息）。调用栈是JS引擎执行程序的一种机制。

程序每调用一层函数（方法），引擎就会生成它的栈帧，栈帧里面保存了函数的执行上下文，然后将它压入调用栈。栈是一个后进先出的结构，直到最里层的函数执行完，引擎才开始将最后加入的栈帧从栈中弹出。

函数调用会在内存形成一个“调用记录”，又称“调用帧”（call frame），保存调用位置和内部变量等信息。如果在函数A的内部调用函数B，那么在A的调用帧上方，还会形成一个B的调用帧。等到B运行结束，将结果返回到A，B的调用帧才会消失。如果函数B内部还调用函数C，那就还有一个C的调用帧，以此类推。所有的调用帧，就形成一个“调用栈”（call stack）

举个例子：

const str = '开始';

console.log('1');

function a() {
    
    let c = b();
    console.log(c);
}

function b() {
    return 123;
}

a();

复制代码

下面详细解释一下这段代码的执行：

1. 先调用console.log("1");形成一个栈帧，然后弹出。
2. 再执行a();再形成一个栈帧，保存a的执行上下文，压入栈。
3. 之后调用b();生成一个b的栈帧，b执行完，弹出b的栈帧回到a的栈帧完成赋值操作，继续执行console.log(c);a执行结束，弹出a的栈帧。

要点

• 每调用一个函数都会生成它的栈帧（调用帧），栈帧里面保存了函数的执行上下文，然后引擎将这个栈帧压入栈。
• 栈是一个后进先出的结构，直到最里层的函数调用完，就会把这个函数生成的栈帧从栈中弹出。
• 同时也要注意，诸如const str = 'biu'的变量声明是不会入栈的。调用栈也要占用内存，所以如果调用栈过深，浏览器会报Uncaught RangeError: Maximum call stack size exceeded错误。

通过尾调用优化可以节省内存