淺析javascript調(diào)用棧

diabloneo 發(fā)布于2019-08-20 18:19 / 1798人閱讀

摘要：調(diào)用棧是一種棧結(jié)構(gòu)它用來存儲計(jì)算機(jī)程序執(zhí)行時(shí)候其活躍子程序的信息。調(diào)用棧是解析器的一種機(jī)制。并形成一個棧幀任何被這個函數(shù)調(diào)用的函數(shù)會進(jìn)一步添加到調(diào)用棧中，形成另一個棧幀并且運(yùn)行到它們被上個程序調(diào)用的位置。然后調(diào)用棧繼續(xù)運(yùn)行其他部門。

大家在進(jìn)行javascript開發(fā)的時(shí)候，有沒有想過，我們寫的代碼是怎么樣運(yùn)行的呢？下面我們就來剖析一下代碼的執(zhí)行過程。

一什么是調(diào)用棧

代碼在運(yùn)行過程中，會有一個叫做調(diào)用棧(call stack)的概念。調(diào)用棧是一種棧結(jié)構(gòu),它用來存儲計(jì)算機(jī)程序執(zhí)行時(shí)候其活躍子程序的信息。（比如什么函數(shù)正在執(zhí)行，什么函數(shù)正在被這個函數(shù)調(diào)用等等信息）。調(diào)用棧是解析器的一種機(jī)制。call stack

我們以一段簡單代碼為示例，來看一看到底什么是調(diào)用棧，它是一個怎么樣的運(yùn)行機(jī)制

 function boo (a) {
    return a * 3
  }
  function foo (b) {
    return boo(4) * 2
  }
  console.log(foo(3))

二詳解代碼執(zhí)行

下面我們來分析一下上述代碼的執(zhí)行過程
（1）console.log(foo(3)) 執(zhí)行，形成一個棧幀，調(diào)用foo函數(shù)，再形成另一個棧幀。
（2）新的棧幀壓在上一個棧幀之上，繼續(xù)執(zhí)行代碼，foo函數(shù)中又調(diào)用了boo函數(shù)，形成了另一個棧幀壓在舊棧幀之上。然后執(zhí)行boo。
（3）當(dāng)執(zhí)行完boo時(shí)候，返回值給foo函數(shù)之后,boo被推出調(diào)用棧,foo函數(shù)繼續(xù)執(zhí)行，然后foo函數(shù)執(zhí)行完，返回值給console.log,foo函數(shù)被推出調(diào)用棧，console.log得到foo函數(shù)的返回值，運(yùn)行，輸出結(jié)果，最后console.log也被推出調(diào)用棧，該段程序執(zhí)行完成。
圖解代碼運(yùn)行過程：

三一個更復(fù)雜的例子

// 省略一部分html

$.on("button", "click", function onClick() {
    setTimeout(function timer() {
        console.log("You clicked the button!");    
    }, 0);
});

console.log("Hi!");

setTimeout(function timeout() {
    console.log("Click the button!");
}, 5000);

console.log("My Name Is Chirs.")

大家看看上敘的代碼，結(jié)合一下前面的的分析，思考一下調(diào)用棧是怎么工作的？
（1）先運(yùn)行綁定事件函數(shù)，把onClick事件綁定在button標(biāo)簽上。該函數(shù)沒有沒有調(diào)用其他函數(shù)。
（2）接下來運(yùn)行console.log("hi"),該函數(shù)沒有調(diào)用任何其他函數(shù)。
（3）然后繼續(xù)執(zhí)行下面的setTimeout，setTimeout是一個異步函數(shù)，經(jīng)過5秒之后，在運(yùn)行隊(duì)列里面插入這個回調(diào)函數(shù)，然后如果該隊(duì)列之前沒有其他函數(shù)，就執(zhí)行該隊(duì)列，有則等待前面的函數(shù)執(zhí)行完成，再執(zhí)行。
（4）console.log("My Name Is Chirs")不會等待5s之后，再執(zhí)行，因?yàn)閟ettimeout并不會在調(diào)用棧中執(zhí)行5秒，實(shí)際上它在調(diào)用棧中是立即執(zhí)行完的。
（5)假設(shè)在這個時(shí)候，我們點(diǎn)擊了按鈕，按鈕綁定的回調(diào)事件被添加到運(yùn)行隊(duì)列中。（運(yùn)行隊(duì)列中的代碼要等調(diào)用棧被清空之后才會執(zhí)行）由于調(diào)用棧中還有代碼需要執(zhí)行，所以會繼續(xù)執(zhí)行下面的console.log(）
（6）然后執(zhí)行完console.log之后，由于時(shí)間還沒有經(jīng)過5s,所以點(diǎn)擊的回調(diào)事件會被先壓入棧中去執(zhí)行，由于該回調(diào)事件里面又是一個settimeout事件，由于它的事件間隔只有0s，所以這個settimeout的回調(diào)會先被壓入運(yùn)行隊(duì)列。先輸出You clicked the button! 再過幾秒之后，間隔為5s的settimeout把回調(diào)函數(shù)壓入隊(duì)列，這時(shí)候調(diào)用棧中沒有代碼在執(zhí)行，所以會執(zhí)行這個代碼，輸出"Click the button“。結(jié)束代碼運(yùn)行。

同樣來看一個運(yùn)行示意圖：

四總結(jié)

調(diào)用棧其實(shí)就是一種解析器去處理程序的機(jī)制，它是棧數(shù)據(jù)結(jié)構(gòu)。它能追蹤子程序的運(yùn)行狀態(tài)。
（1）當(dāng)腳本要調(diào)用一個函數(shù)時(shí)，解析器把該函數(shù)添加到棧中并且執(zhí)行這個函數(shù)。并形成一個棧幀
（2）任何被這個函數(shù)調(diào)用的函數(shù)會進(jìn)一步添加到調(diào)用棧中，形成另一個棧幀,并且運(yùn)行到它們被上個程序調(diào)用的位置。
（3）當(dāng)執(zhí)行完這個函數(shù)后，如果它沒有調(diào)用其他函數(shù)，則它會從調(diào)用棧中推出。然后調(diào)用棧繼續(xù)運(yùn)行其他部門。
（4) 異步函數(shù)的回調(diào)函數(shù)一般都會被添加到運(yùn)行隊(duì)列里面，如settimeout會在響應(yīng)的時(shí)間后把回調(diào)函數(shù)放入隊(duì)列中，隊(duì)列里的函數(shù)需要等棧為空時(shí)才會被推入棧中執(zhí)行。如果隊(duì)列中有其他函數(shù)，需要等隊(duì)列前面的函數(shù)被堆入調(diào)用棧中之后才會運(yùn)行。