JS调用栈的一些总结

原文地址

调用栈

调用栈是解释器追踪函数执行流的一种机制。当执行环境中调用了多个函数函数时，通过这种机制，我们能够追踪到哪个函数正在执行，执行的函数体中又调用了哪个函数。

我们知道JavaScript是一种解释性的脚本语言，浏览器在运行JS脚本时按照顺序从上往下逐行解释。

• 当运行到一个函数时，解释器就将该函数添加到栈顶并执行；
• 当调用栈中执行的函数还调用了其他函数，那么新函数也将会被添加到调用栈，一旦这个函数被调用，便会立即执行；
• 当前函数执行完毕后，解释器将其清出调用栈，继续执行当前执行环境下的剩余代码；
• 当分配的调用栈空间被占满时，会引发“堆栈溢出”；

下面看一个例子来了解调用栈：

function multiply(x, y) {
  return x * y;
}

function printSquare(x) {
  ...
  var s = multiply(x, x);
  console.log(s);
}

printSquare(5);

当执行上述代码时，调用栈的变化如下：

1. 把printSquare()添加到调用栈；
2. 执行把printSquare函数，代码执行到multiply()时，把multiply()添加到调用栈；
3. multiply函数执行完，将他从调用栈移出；
4. 执行console.log方法，并把该方法添加到调用栈
5. 删除调用栈中的console.log方法
6. printSquare执行完毕，删除调用栈中的printSquare
   
   一开始，我们得到一个空空如也的调用栈。随后，每当有函数被调用都会自动地添加进调用栈，执行完函数体中的代码后，调用栈又会自动地移除这个函数。最后，我们又得到了一个空空如也的调用栈。

• 异常追踪
  调用栈有一个很重要的应用就是异常追踪，当异常发生的时候，通过调用栈能够追踪到异常发生的位置。

function foo() {
  throw new Error('SessionStack will help you resolve crashes :)');
}
function bar() {
  foo();
}
function start() {
  bar();
}
start();