一、工具頁面

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

1.代碼區(qū)塊

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

2.操作區(qū)塊

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

3.可視化區(qū)塊

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

image-20220504090946788.png

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

js中有很多晦澀難懂的關(guān)鍵技術(shù)點(diǎn)，例如變量對(duì)象、調(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.變量對(duì)象

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

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

2.調(diào)用棧

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

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

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

可視化工具.gif