JavaScript—— 函數(shù)聲明和函數(shù)表達式有什么不同嗎？

FleyX 發(fā)布于2019-08-20 16:36 / 2015人閱讀

摘要：函數(shù)聲明和函數(shù)表達式的區(qū)別函數(shù)聲明只能出現(xiàn)在程序或函數(shù)體內(nèi)。所以，在等語義為語句的代碼塊中存在函數(shù)聲明，由于函數(shù)提升特性，會破壞掉原本的語義。

這篇談一下JS函數(shù)聲明與函數(shù)表達式的區(qū)別及要注意的地方：

函數(shù)聲明主要有兩種類型：

函數(shù)聲明

        function fn() {};

函數(shù)表達式

        var fn = function () {};

這兩種函數(shù)創(chuàng)建方式有區(qū)別嗎？當(dāng)然有，回想一下變量聲明提升，這里函數(shù)也遵循這個規(guī)則。

JS函數(shù)聲明和函數(shù)表達式的區(qū)別

FunctionDeclaration（函數(shù)聲明）只能出現(xiàn)在Program（程序）或FunctionBody（函數(shù)體）內(nèi)。從句法上講，它們不能出現(xiàn)在Block（塊）（{ ... }）中，例如不能出現(xiàn)在 if、while 或 for 語句中。因為 Block（塊）中只能包含Statement（語句），而不能包含FunctionDeclaration（函數(shù)聲明）這樣的SourceElement（源元素）。

　　另一方面，仔細看一看產(chǎn)生規(guī)則也會發(fā)現(xiàn)，唯一可能讓Expression（表達式）出現(xiàn)在Block（塊）中情形，就是讓它作為ExpressionStatement（表達式語句）的一部分。但是，規(guī)范明確規(guī)定了ExpressionStatement（表達式語句）不能以關(guān)鍵字function開頭。而這實際上就是說，F(xiàn)unctionExpression（函數(shù)表達式）同樣也不能出現(xiàn)在Statement（語句）或Block（塊）中（別忘了Block（塊）就是由Statement（語句）構(gòu)成的）。
由于存在上述限制，只要函數(shù)出現(xiàn)在塊中（像上面例子中那樣），實際上就應(yīng)該將其看作一個語法錯誤，而不是什么函數(shù)聲明或表達式。
那么我們應(yīng)該在什么時候使用函數(shù)聲明或函數(shù)表達式呢？函數(shù)聲明只能出現(xiàn)在“程序代碼”中，意味著只能在其它函數(shù)體中或者全局空間；它們的定義不能不能賦值給一個變量或?qū)傩裕蛘咦鳛橐粋€參數(shù)傳遞出現(xiàn)在函數(shù)調(diào)用中；

概括一下就是：絕對不要將會函數(shù)聲明放在一條語句內(nèi)。

Javascript 中函數(shù)聲明和函數(shù)表達式是存在區(qū)別的，函數(shù)聲明在JS解析時進行函數(shù)提升，因此在同一個作用域內(nèi)，不管函數(shù)聲明在哪里定義，該函數(shù)都可以進行調(diào)用。

函數(shù)表達式的值是在JS運行時確定，并且在表達式賦值完成后，該函數(shù)才能調(diào)用。這個微小的區(qū)別，可能會導(dǎo)致JS代碼出現(xiàn)意想不到的bug,讓你陷入莫名的陷阱中。

        fn();                // "fn"
        function f n() {
            console.log("fn")
        };
        
        fn2();                // "Uncaught TypeError: undefined is not a function"
        var fn2 = function () {    
            alert("fn2");
        };

這段代碼就是對上面文字的解釋。所以，在if、while等語義為語句的代碼塊中存在函數(shù)聲明，由于函數(shù)提升特性，會破壞掉原本的語義。函數(shù)提升后，作用域也會為為該函數(shù)的下的函數(shù)作用域，這樣原本屬于函數(shù)"內(nèi)部"的函數(shù)就變?yōu)橥獠康牧恕?/p>

這里接兩個大神的文章：

函數(shù)聲明和函數(shù)表達式——函數(shù)聲明的聲明提前 - myvin - 博客園

詳解Javascript 函數(shù)聲明和函數(shù)表達式的區(qū)別 - JackWang-CUMT - 博客園