關於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();