javascript函數宣告和函數表達式區別分析_基礎知識

　　平常再用js寫函數的時候，一般都是以慣例function fn () {} 的方式來宣告一個函數，在閱讀一些優秀插件的時候又不免見到var fn = function () {} 這種函數的創建，究竟他們用起來有什麼差別呢，今天就本著打破砂鍋問到底的精神，好好來說說這個讓人神魂顛倒的--函數聲明。

函數宣告

　　函數宣告範例程式碼

複製程式碼 程式碼如下:

function fn () {
    console.log('fn 函數執行..');
    // code..
}

　　這樣我們就聲明了一個名稱為fn的函數，這裡出個思考，你認為在這個函數的上面來呼叫他的話會執行嗎？還是會報錯？

複製程式碼 程式碼如下:

fn(); // 在之前呼叫我們宣告的fnfunction fn () { console.log('fn 函數執行..'); // code..}

　　控制台輸出結果：

　　是的，此時fn函數是可以被呼叫的，這裡來總結下原因。

總結：

　　1：此時fn函數是變數的結果，預設儲存在全域上下文的變數中(可用 window.函數名稱 來驗證)

　　2：此方式為函數聲明，在進入全域上下文階段創建，程式碼執行階段，它們已經可用。 ps：javaScript每次進入方法時都會先初始化上下文環境（由全域 → 局部）

　　3：它可以影響變數物件（僅影響儲存在上下文中的變數）

函數表達式

　　函數表達式範例程式碼

複製程式碼 程式碼如下:

var fn = function () {
    console.log('fn 函數【表達式】宣告執行..')
    // code..
}

　　這樣我們就聲明了一個匿名函數，並且把它的引用指向了變數fn？

　　再次在該表達式宣告的函數上下方各呼叫一次，來看控制台的輸出結果。

複製程式碼 程式碼如下:

// 為了清晰的看到控制台的輸出，我們在各自呼叫前後做個標記，增加可讀性。
console.log('之前呼叫開始..');
fn();
console.log('之前呼叫結束..');
var fn = function () {
    console.log('fn 函數【表達式】宣告執行..')
    // code..
}
console.log('之後呼叫開始..');
fn();
console.log('之後呼叫開始..');

　　控制台列印結果：

　　可以看到程式碼執行到第一次呼叫fn()函數的時候，提示：fn is not a function （fn 不是一個方法），遇到錯誤而終止運行。

　　這說明在第一次呼叫fn()的同時，var fn 變數並沒有做為全域物件的一個屬性而存在，且 fn 所引用的匿名函數上下文也沒有被初始化，所以在他之前呼叫失敗。

複製程式碼 程式碼如下:

// 現在先把之前的呼叫邏輯給註解掉，再看下控制台的輸出
//    console.log('之前呼叫開始..');
//    fn();
//    console.log('之前呼叫結束..');
    var fn = function () {
        console.log('fn 函數【表達式】宣告執行..')
        // code..
    }
    console.log('之後呼叫開始..');
    fn(); // 在表達式之後呼叫
    console.log('之後呼叫開始..');

　　控制台列印結果：

　　可以看出，在該表達式函數之後來呼叫是可以的，來總結下那是為什麼呢？

總結：

　　1：首先變數本身不做為一個函數存在，而是一個匿名函數的參考（值類型的不屬於引用）

　　2：在程式碼執行階段，初始化全域上下文時，它沒有被做為全域的一個屬性而存在，所以不會造成變數物件的污染

　　3：此類型的聲明一般在插件的開發較常見，也可做為閉包中回呼函數的呼叫

　　所以 function fn () {} 不等於 var fn = function () {} ，他們有本質上的差別。

以上就是本文的全部內容了，思路很清晰，對比也很明確，是篇非常不錯的文章，小夥伴們一定要仔細研讀下