以最簡單的例子，深入剖析函數如何進行初始化工作，入棧，出棧全過程

lastSeries 發布于2019-08-20 11:30 / 1920人閱讀

摘要：在一個函數中的內容執行前會做一些變量的初始化工作，就是圖中下的內容。輸出完后，函數出棧，函數變為活動狀態，因為沒有返回值，所以仍然為同時執行下一語句，如下圖執行與相同，先是函數入棧，輸出然后將返回值賦給后出棧。

window.onload = function(){
            debugger;
            var variable1,//定義變量1但沒有賦值
                variable2 = 2;//定義變量2同時給其賦值
            variable1 = 1;//給變量1賦值
            function fun1(){//函數聲明，定義 fun1 函數,沒有返回值
                alert("im in fun1");
            }
            function fun2(){//函數聲明，定義 fun2 函數，有返回值
                alert("im in fun2");
                return "returned value from fun2()";
            }
            var variable3 = function(){// 函數表達式，將變量3 variable3 指向一個匿名函數
                alert("im in a anonymous function")
            }
            var variable4 = fun1;//相當于將變量4 variable4 指向fun1 函數，即 variable4 是fun1函數的一個引 作用就和變量3 variable3 指向一個匿名函數一樣
            var variable5 = fun1();//首先執行 fun1() 函數，即輸出 "im in fun1" 字符串，然后執行賦值語句，雖然該函數沒有返回值，默認返回 undefined，即 變量5 variable5="undefined"
            var variable6 = fun2();//和變量5 的過程一樣，只是fun2 函數有返回值，所以變量6 variable6="returned value from fun2()"
        }

然后我們一步一步來剖析

](http://upload-images.jianshu....

一進入網頁就進入到 window.onload() 函數中去，然后暫停到我設置的斷點處。

然后這時來看一下執行上下文棧（就是函數入棧出棧的那個地方）

可以看到圖片左上角的 Call Stack 這里就是函數調用棧，在其下方有 window.onload 就說明現在處于 window.onload 函數作用域中。在一個函數中的內容執行前會做一些變量的初始化工作，就是圖中 Local 下的內容。

其中只有 this 和函數聲明被定義并且被賦值了，就是圖中的 this 和 fun1,fun2 函數，而其他的變量都只是被定義了而沒有被賦值所以默認為undefined.

這其中就有一個知識點了

在函數做一些準備工作（就是變量的定義或者賦值）時，this 和 函數聲明 會被定義并且賦值，但是直接定義的變量 和 函數表達式只是被定義了并為初始值為undefined,只能等到 賦值語句執行后 才會被賦值，下面有圖可以證明

可以看到當執行 variable2 = 2 時，上面的variable1 和 variable2 仍然是undefined. 但是執行到 variable1 = 1;，即 variable2 = 2 執行完畢后 variable2 被賦值為 2。同理可知當variable1 = 1;執行完畢后，variable1才會被賦值。

當執行到var variable4 = fun1;時，在其前面的 變量3 variable3 執行完賦值語句后被賦值。

當執行完 var variable4 = fun1; 后var variable4 指向 fun1 函數

由圖可知當執行完 var variable5 = fun1()，第二張圖中  Call Stack 下面有 fun1,window.onload 說明    fun1函數入棧，并進入到 fun1函數內部執行輸出。

輸出完后，fun1函數出棧，window.onload 函數變為活動狀態，因為沒有返回值，所以variable5仍然為undefined,同時執行下一語句，如下圖：

執行var variable6 = fun2();與variable5相同，先是fun2函數入棧，輸出"im in fun2",然后將返回值賦給variable6 后出棧。

window.onload 函數變為活動狀態后執行完所有語句后，出棧，至此函數的初始化工作和出棧入棧就結束了。

云服務器 GPU云服務器入棧出棧入棧和出棧 java 出棧入棧如何進行簡單的數據分析

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80613.html

理解異步JavaScript

摘要：當函數結束，將會被從調用棧移出。事件循環事件循環的責任就是查看調用棧并確定調用棧是否為空。事件循環會再次檢查調用棧是否為空，如果為空的話，它會把事件回調壓入棧中，然后回調函數則被執行。寫在文章前這篇文章是翻譯自Sukhjinder Arora的Understanding Asynchronous JavaScript。這篇文章描述了異步和同步JavaScript是如何在運行環境中，...

ixlei 2019-08-23 13:58 評論0 收藏0
解密JavaScript執行上下文

摘要：執行上下文棧首先我們先了解一下什么是執行上下文棧。那么隨著我們的執行上下文數量的增加，引擎又如何去管理這些執行上下文呢這時便有了執行上下文棧。這樣由多個執行上下文的變量對象構成的鏈表就叫做作用域鏈。執行上下文棧首先我們先了解一下什么是執行上下文棧（Execution context stack）。 showImg(https://segmentfault.com/img/remot...

JeOam 2019-08-26 13:51 評論0 收藏0
實現一個前端路由，如何實現瀏覽器的前進與后退？

摘要：執行過程如下實現瀏覽器的前進后退第二個方法就是用兩個棧實現瀏覽器的前進后退功能。我們使用兩個棧，和，我們把首次瀏覽的頁面依次壓入棧，當點擊后退按鈕時，再依次從棧中出棧，并將出棧的數據依次放入棧。 showImg(https://segmentfault.com/img/bVbtK6U?w=1280&h=910); 如果要你實現一個前端路由，應該如何實現瀏覽器的前進與后退？ 2. 問題...

劉東 2019-08-23 18:01 評論0 收藏0
前端進擊的巨人（一）：執行上下文與執行棧，變量對象

摘要：在中，通過棧的存取方式來管理執行上下文，我們可稱其為執行棧，或函數調用棧。而處于棧頂的是當前正在執行函數的執行上下文，當函數調用完成后，它就會從棧頂被推出理想的情況下，閉包會阻止該操作，閉包后續文章深入詳解。寫在開篇已經不敢自稱前端小白，曾經吹過的牛逼總要一點點去實現。正如前領導說的，自己喝酒吹過的牛皮，跪著都得含著淚去實現。那么沒有年終完美總結，來個新年莽撞開始可好。進擊巨...

_Suqin 2019-08-23 14:42 評論0 收藏0