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

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

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

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

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

函數(shù)聲明

        function fn() {};

函數(shù)表達(dá)式

        var fn = function () {};

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

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

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

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

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

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

函數(shù)表達(dá)式的值是在JS運(yùn)行時(shí)確定，并且在表達(dá)式賦值完成后，該函數(shù)才能調(diào)用。這個(gè)微小的區(qū)別，可能會(huì)導(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");
        };

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

這里接兩個(gè)大神的文章：

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

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