javascript function 聲明及編譯執行順序Tips

wpw 發布于2019-08-20 14:20 / 2191人閱讀

摘要：因為塊中只能包含語句，而不能包含函數聲明這樣的源元素。但是，規范明確規定了表達式語句不能以關鍵字開頭。所以我們代碼中的是在中只能被視為函數表達式，而不是函數聲明，不會被提前編譯解析。

今天在學習前端工程師手冊 > 關于函數章節時收獲一點點知識，做個記錄并分享一下。
我們先從看兩段代碼，再來分析。
代碼1：

    function foo() { return 1; }
    var foo = function() { return 2; }
    foo(); //結果是 2

代碼2：

    var foo = function(){ return 2;}
    function foo() { return 1; }
    foo(); //結果是 2

*知識點：在當前作用域下,函數聲明會被最先提前被編譯執行，如本文：function foo(){}

所以上面代碼類似于：

代碼1：

    function foo() { return 1; }
    var foo = function() { return 2; }
    foo();
     
    ↓↓ (編譯后)
    
    var foo = function() { return 1; }
    foo = function() { return 2; }
    foo();

代碼2：

    var foo = function() { return 2; }
    function foo() { return 1; }
    foo(); 
     
    ↓↓ (編譯后)
    
    var foo = function(){return 1;}//function foo() { return 1; }被提到最前面了
    foo = function(){return 2;}
    foo();

再來看另一種情況：

    if (true) {
        function foo() { return 1; }
    }
    function foo() { return 2; }
    foo(); //結果 1

我們還是按照上面邏輯進行解讀：

    if (true) {
        function foo() { return 1; }
    }
    function foo() { return 2; }
    foo(); 
    
    ↓↓ (編譯后)
    
    var foo = function () { return 2; }
    if (true) {
        var foo = function () { return 1; }
    }
    foo();

可能有人會疑問：為什么function foo () { return 1; } 沒有被提前呢？

因為函數聲明只能出現在程序或函數體內。從句法上講，它們不能出現在Block（塊）（{ ... }）中，例如不能出現在 if、while 或for 語句中。因為 Block（塊）中只能包含Statement語句，
而不能包含函數聲明這樣的源元素。另一方面，仔細看一看規則也會發現，唯一可能讓表達式出現在Block（塊）中情形，就是讓它作為表達式語句的一部分。但是，規范明確規定了表達式語句不能以關鍵字function開頭。而這實際上就是說，函數表達式同樣也不能出現在Statement語句或Block（塊）中（因為Block（塊）就是由Statement語句構成的）。

所以我們代碼中的function foo () { return 1; } 是在if中,只能被視為函數表達式，而不是函數聲明，不會被提前編譯解析。

云服務器 GPU云服務器 javascript執行順序執行順序執行順序問邏輯執行順序

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

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

js預編譯過程

摘要：所以變量聲明提升和函數聲明提升會出現一個先后順序預編譯過程結束。先科普： 1.javaScript是解釋型語言,就是編譯一行，執行一行.....2.javaScript沒有塊級及作用域......3.javaScript具有變量和函數聲明提升功能.....4.AO對象和GO對象....5.預編譯就是解決代碼執行順序問題,與java語言類似(jvm).... 例如： (function...

FWHeart 2019-08-22 16:39 評論0 收藏0
JavaScript 工作原理之三－內存管理及如何處理 4 類常見的內存泄漏問題(譯)

摘要：這是因為我們訪問了數組中不存在的數組元素它超過了最后一個實際分配到內存的數組元素字節，并且有可能會讀取或者覆寫的位。包含個元素的新數組由和數組元素所組成中的內存使用中使用分配的內存主要指的是內存讀寫。原文請查閱這里，本文有進行刪減，文后增了些經驗總結。本系列持續更新中，Github 地址請查閱這里。這是 JavaScript 工作原理的第三章。我們將會討論日常使用中另一個被開發...

weknow619 2019-08-22 17:05 評論0 收藏0
JavaScript中的執行上下文和變量對象

摘要：以上簡單總結了下對執行上下文和變量對象的理解，主要在于記錄總結一下學習成果，目前文章的水平實在不敢談分享。執行上下文(Execution Context) 文章同步到github javaScript中的執行上下文和變量對象 JavaScript代碼執行的過程，包括編譯和執行兩個階段，編譯就是通過詞法分析，構建抽象抽象語法樹，并編譯成機器識別的指令，在JavaScript代碼編譯階段...

why_rookie 2019-08-26 12:10 評論0 收藏0
讀書筆記(05) - 事件 - JavaScript高級程序設計

摘要：而事件分為個級別級事件處理程序，級事件處理程序和級事件處理程序。級中沒有規范事件的相關內容，所以沒有級事件處理。 showImg(https://segmentfault.com/img/bVburYR?w=499&h=400); HTML依托于JavaScript來實現用戶與WEB網頁之間的動態交互，接收用戶操作并做出相應的反饋，而事件在此間則充當橋梁的重要角色。日常開發中，經常會...

tinylcy 2019-08-23 13:58 評論0 收藏0