一、工具頁面

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

1.代碼區(qū)塊

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

2.操作區(qū)塊

操作區(qū)塊主要負責代碼的移動，F(xiàn)irst按鈕將代碼運行到開頭;Last按鈕將代碼運行到末尾;Prev負責逐行將代碼移動到上一步;Next負責逐行將代碼移動到下一步。

3.可視化區(qū)塊

可視化區(qū)塊用來展示執(zhí)行過程中的調(diào)用棧、相關(guān)變量以及對應(yīng)的變量值。

image-20220504090946788.png

二、秒殺js關(guān)鍵技術(shù)點在

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

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.變量對象

變量對象是一個與執(zhí)行上下文相關(guān)的特殊對象，存儲著上下文中聲明的內(nèi)容。按照執(zhí)行上下文可劃分為全局上下文中的變量對象和函數(shù)上下文中的對象，當執(zhí)行到函數(shù)f2時，其變量對象中的三部分均得到創(chuàng)建：

• 創(chuàng)建arguments對象;
• 檢查function函數(shù)聲明創(chuàng)建屬性;
• 檢查變量聲明創(chuàng)建屬性。

2.調(diào)用棧

當JavaScript執(zhí)行全局代碼的時候，會創(chuàng)建全局執(zhí)行執(zhí)行上下文(整個頁面的生存周期內(nèi)，全局執(zhí)行上下文只有一份);在調(diào)用一個函數(shù)的時候會創(chuàng)建該函數(shù)的執(zhí)行上下文(執(zhí)行環(huán)境)。將多個執(zhí)行上下文管理起來的就是調(diào)用棧(調(diào)用棧就是用來管理函數(shù)調(diào)用關(guān)系的一種數(shù)據(jù)結(jié)構(gòu)),當函數(shù)運行到f2Child這個函數(shù)的時候，其調(diào)用棧是什么樣子的呢?用該工具可以很好的進行展示。

3.代碼執(zhí)行過程

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

可視化工具.gif