一、工具頁面

整個頁面看起來是如此的樸素，包含三個區塊：代碼區塊、操作區塊、可視化區塊，三個區塊的功能如下所示：

1.代碼區塊

該部分主要負責編輯要執行的代碼，特別注意，該工具不支持一些函數，例如：setTimeout、setInterval等，這部分確實是該平臺需要進一步優化的點。

2.操作區塊

操作區塊主要負責代碼的移動，First按鈕將代碼運行到開頭;Last按鈕將代碼運行到末尾;Prev負責逐行將代碼移動到上一步;Next負責逐行將代碼移動到下一步。

3.可視化區塊

可視化區塊用來展示執行過程中的調用棧、相關變量以及對應的變量值。

image-20220504090946788.png

二、秒殺js關鍵技術點在

js中有很多晦澀難懂的關鍵技術點，例如變量對象、調用棧、代碼執行過程等，下面用一段代碼，并通過該工具可以更加直觀的了解這些內容，從而降低理解成本。

var a = 10;

function f1() {
  var b = 20;
  
  return a + b;
}

function f2(e) {
  var c = 30;
  var d = f1();
  function f2Child() {
      return d * 2;
  }
  return c + d + e + f2Child();
}

f2(15);

1.變量對象

變量對象是一個與執行上下文相關的特殊對象，存儲著上下文中聲明的內容。按照執行上下文可劃分為全局上下文中的變量對象和函數上下文中的對象，當執行到函數f2時，其變量對象中的三部分均得到創建：

• 創建arguments對象;
• 檢查function函數聲明創建屬性;
• 檢查變量聲明創建屬性。

2.調用棧

當JavaScript執行全局代碼的時候，會創建全局執行執行上下文(整個頁面的生存周期內，全局執行上下文只有一份);在調用一個函數的時候會創建該函數的執行上下文(執行環境)。將多個執行上下文管理起來的就是調用棧(調用棧就是用來管理函數調用關系的一種數據結構),當函數運行到f2Child這個函數的時候，其調用棧是什么樣子的呢?用該工具可以很好的進行展示。

3.代碼執行過程

通過點擊操作區塊的按鈕可看到可視化區域中的調用棧和變量對象在不斷變化，從而可以清晰了解整個代碼執行過程。

可視化工具.gif