資訊專欄INFORMATION COLUMN
摘要：在一個函數(shù)中的內(nèi)容執(zhí)行前會做一些變量的初始化工作，就是圖中下的內(nèi)容。輸出完后，函數(shù)出棧，函數(shù)變?yōu)榛顒訝顟B(tài)，因為沒有返回值，所以仍然為同時執(zhí)行下一語句，如下圖執(zhí)行與相同，先是函數(shù)入棧，輸出然后將返回值賦給后出棧。
window.onload = function(){
debugger;
var variable1,//定義變量1但沒有賦值
variable2 = 2;//定義變量2同時給其賦值
variable1 = 1;//給變量1賦值
function fun1(){//函數(shù)聲明，定義 fun1 函數(shù),沒有返回值
alert("im in fun1");
}
function fun2(){//函數(shù)聲明，定義 fun2 函數(shù)，有返回值
alert("im in fun2");
return "returned value from fun2()";
}
var variable3 = function(){// 函數(shù)表達式，將變量3 variable3 指向一個匿名函數(shù)
alert("im in a anonymous function")
}
var variable4 = fun1;//相當于將變量4 variable4 指向fun1 函數(shù)，即 variable4 是fun1函數(shù)的一個引 作用就和變量3 variable3 指向一個匿名函數(shù)一樣
var variable5 = fun1();//首先執(zhí)行 fun1() 函數(shù)，即輸出 "im in fun1" 字符串，然后執(zhí)行賦值語句，雖然該函數(shù)沒有返回值，默認返回 undefined，即 變量5 variable5="undefined"
var variable6 = fun2();//和變量5 的過程一樣，只是fun2 函數(shù)有返回值，所以變量6 variable6="returned value from fun2()"
}
然后我們一步一步來剖析
](http://upload-images.jianshu....
然后這時來看一下 執(zhí)行上下文棧（就是函數(shù)入棧出棧的那個地方）一進入網(wǎng)頁就進入到 window.onload() 函數(shù)中去，然后暫停到我設(shè)置的斷點處。
可以看到圖片左上角 的 Call Stack 這里就是函數(shù)調(diào)用棧，在其下方有 window.onload 就說明現(xiàn)在處于 window.onload 函數(shù)作用域中。在一個函數(shù)中的內(nèi)容執(zhí)行前會做一些變量的初始化工作，就是圖中 Local 下的內(nèi)容。
這其中就有一個知識點了其中 只有 this 和 函數(shù)聲明 被定義并且被賦值了，就是圖中的 this 和 fun1,fun2 函數(shù)，而其他的變量都只是被定義了而沒有被賦值所以默認為undefined.
在函數(shù)做一些準備工作（就是變量的定義或者賦值）時，this 和 函數(shù)聲明 會被定義并且賦值，但是直接定義的變量 和 函數(shù)表達式只是被定義了并為初始值為undefined,只能等到 賦值語句執(zhí)行后 才會被賦值，下面有圖可以證明
可以看到當執(zhí)行 variable2 = 2 時，上面的variable1 和 variable2 仍然是undefined. 但是執(zhí)行到 variable1 = 1;，即 variable2 = 2 執(zhí)行完畢后 variable2 被賦值為 2。同理可知當variable1 = 1;執(zhí)行完畢后，variable1才會被賦值。
當執(zhí)行到var variable4 = fun1;時，在其前面的 變量3 variable3 執(zhí)行完賦值語句后被賦值。
當執(zhí)行完 var variable4 = fun1; 后var variable4 指向 fun1 函數(shù)
由圖可知當執(zhí)行完 var variable5 = fun1()，第二張圖中 Call Stack 下面有 fun1,window.onload 說明 fun1函數(shù)入棧，并進入到 fun1函數(shù)內(nèi)部執(zhí)行輸出。
輸出完后，fun1函數(shù)出棧，window.onload 函數(shù)變?yōu)榛顒訝顟B(tài)，因為沒有返回值，所以variable5仍然為undefined,同時執(zhí)行下一語句，如下圖：
執(zhí)行var variable6 = fun2();與variable5相同，先是fun2函數(shù)入棧，輸出"im in fun2",然后將返回值賦給variable6 后出棧。
window.onload 函數(shù)變?yōu)榛顒訝顟B(tài)后執(zhí)行完所有語句后，出棧，至此函數(shù)的初始化工作和出棧 入棧 就結(jié)束了。
`
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/80613.html
摘要：當函數(shù)結(jié)束，將會被從調(diào)用棧移出。事件循環(huán)事件循環(huán)的責任就是查看調(diào)用棧并確定調(diào)用棧是否為空。事件循環(huán)會再次檢查調(diào)用棧是否為空，如果為空的話，它會把事件回調(diào)壓入棧中，然后回調(diào)函數(shù)則被執(zhí)行。 寫在文章前 這篇文章是翻譯自Sukhjinder Arora的Understanding Asynchronous JavaScript。這篇文章描述了異步和同步JavaScript是如何在運行環(huán)境中，...
摘要：執(zhí)行上下文棧首先我們先了解一下什么是執(zhí)行上下文棧。那么隨著我們的執(zhí)行上下文數(shù)量的增加，引擎又如何去管理這些執(zhí)行上下文呢這時便有了執(zhí)行上下文棧。這樣由多個執(zhí)行上下文的變量對象構(gòu)成的鏈表就叫做作用域鏈。 執(zhí)行上下文棧 首先我們先了解一下什么是執(zhí)行上下文棧（Execution context stack）。 showImg(https://segmentfault.com/img/remot...
摘要：執(zhí)行過程如下實現(xiàn)瀏覽器的前進后退第二個方法就是用兩個棧實現(xiàn)瀏覽器的前進后退功能。我們使用兩個棧，和，我們把首次瀏覽的頁面依次壓入棧，當點擊后退按鈕時，再依次從棧中出棧，并將出棧的數(shù)據(jù)依次放入棧。 showImg(https://segmentfault.com/img/bVbtK6U?w=1280&h=910); 如果要你實現(xiàn)一個前端路由，應(yīng)該如何實現(xiàn)瀏覽器的前進與后退 ？ 2. 問題...
摘要：在中，通過棧的存取方式來管理執(zhí)行上下文，我們可稱其為執(zhí)行棧，或函數(shù)調(diào)用棧。而處于棧頂?shù)氖钱斍罢趫?zhí)行函數(shù)的執(zhí)行上下文，當函數(shù)調(diào)用完成后，它就會從棧頂被推出理想的情況下，閉包會阻止該操作，閉包后續(xù)文章深入詳解。 寫在開篇 已經(jīng)不敢自稱前端小白，曾經(jīng)吹過的牛逼總要一點點去實現(xiàn)。 正如前領(lǐng)導說的，自己喝酒吹過的牛皮，跪著都得含著淚去實現(xiàn)。 那么沒有年終完美總結(jié)，來個新年莽撞開始可好。 進擊巨...
閱讀 3856·2023-04-25 20:00
閱讀 3243·2021-09-22 15:09
閱讀 578·2021-08-25 09:40
閱讀 3501·2021-07-26 23:38
閱讀 2261·2019-08-30 15:53
閱讀 1159·2019-08-30 13:46
閱讀 2845·2019-08-29 16:44
閱讀 2108·2019-08-29 15:32
