首頁 > web前端 > js教程 > javascript函數宣告和函數表達式區別分析_基礎知識

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

WBOY
發布: 2016-05-16 16:29:33
原創
1026 人瀏覽過

  平常再用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 () {} ,他們有本質上的差別。

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板