建站
咨詢
售后
建站咨詢
新聞中心
一、工具頁面
1.代碼區(qū)塊
該部分主要負責編輯要執(zhí)行的代碼，特別注意，該工具不支持一些函數(shù)，例如：setTimeout、setInterval等，這部分確實是該平臺需要進一步優(yōu)化的點。
創(chuàng)新互聯(lián)建站專注于瀘州企業(yè)網(wǎng)站建設(shè),成都響應式網(wǎng)站建設(shè)公司,成都商城網(wǎng)站開發(fā)。瀘州網(wǎng)站建設(shè)公司,為瀘州等地區(qū)提供建站服務(wù)。全流程按需網(wǎng)站開發(fā)，專業(yè)設(shè)計，全程項目跟蹤，創(chuàng)新互聯(lián)建站專業(yè)和態(tài)度為您提供的服務(wù)
2.操作區(qū)塊
操作區(qū)塊主要負責代碼的移動，F(xiàn)irst按鈕將代碼運行到開頭;Last按鈕將代碼運行到末尾;Prev負責逐行將代碼移動到上一步;Next負責逐行將代碼移動到下一步。
3.可視化區(qū)塊
可視化區(qū)塊用來展示執(zhí)行過程中的調(diào)用棧、相關(guān)變量以及對應的變量值。
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
本文名稱：這款前端可視化代碼執(zhí)行工具，打殘Js執(zhí)行過程
瀏覽路徑：http://www.5511xx.com/article/cdphgce.html
