快捷導(dǎo)航

javascript函數(shù)聲明和函數(shù)表達(dá)式區(qū)別分析

更新時(shí)間：2014年12月02日 11:18:25 投稿：hebedich

本文向大家展示了javascript中函數(shù)聲明和函數(shù)表達(dá)式的概念及區(qū)別，介紹的非常全面，也很詳盡，這里推薦給大家

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

函數(shù)聲明

　　函數(shù)聲明示例代碼

復(fù)制代碼代碼如下:

function fn () {

    console.log('fn 函數(shù)執(zhí)行..');

    // code..

}

　　這樣我們就聲明了一個(gè)名稱為fn的函數(shù)，這里出個(gè)思考，你認(rèn)為在這個(gè)函數(shù)的上面來調(diào)用他的話會(huì)執(zhí)行嗎？還是會(huì)報(bào)錯(cuò)？

復(fù)制代碼代碼如下:

fn(); // 在之前調(diào)用我們聲明的fn函數(shù) function fn () { console.log('fn 函數(shù)執(zhí)行..'); // code..}

　　控制臺(tái)輸出結(jié)果：

　　是的，此時(shí)fn函數(shù)是可以被調(diào)用到的，這里來總結(jié)下原因。

總結(jié)：

　　1：此時(shí)fn函數(shù)是變量的結(jié)果，默認(rèn)存儲(chǔ)在全局上下文的變量中(可用 window.函數(shù)名來驗(yàn)證)

　　2：此方式為函數(shù)聲明，在進(jìn)入全局上下文階段創(chuàng)建，代碼執(zhí)行階段，它們已經(jīng)可用。ps：javaScript在每次進(jìn)入方法時(shí)都會(huì)先初始化上下文環(huán)境（由全局 → 局部）

　　3：它可以影響變量對(duì)象（僅影響存儲(chǔ)在上下文中的變量）

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

　　函數(shù)表達(dá)式示例代碼

復(fù)制代碼代碼如下:

var fn = function () {

    console.log('fn 函數(shù)【表達(dá)式】聲明執(zhí)行..')

    // code..

}

　　這樣我們就聲明了一個(gè)匿名函數(shù)，并且把它的引用指向了變量fn？

　　再次在該表達(dá)式聲明的函數(shù)上下方各調(diào)用一次，來看控制臺(tái)的輸出結(jié)果。

復(fù)制代碼代碼如下:

// 為了清晰的看到控制臺(tái)的輸出，我們?cè)诟髯哉{(diào)用前后做個(gè)標(biāo)記，增加可讀性。

console.log('之前調(diào)用開始..');

fn();

console.log('之前調(diào)用結(jié)束..');

var fn = function () {

    console.log('fn 函數(shù)【表達(dá)式】聲明執(zhí)行..')

    // code..

}

console.log('之后調(diào)用開始..');

fn();

console.log('之后調(diào)用開始..');

　　控制臺(tái)打印結(jié)果：

　　可以看到代碼在執(zhí)行到第一次調(diào)用fn()函數(shù)的時(shí)候，提示：fn is not a function （fn 不是一個(gè)方法），遇到錯(cuò)誤而終止運(yùn)行。

　　這說明在第一次調(diào)用fn()的同時(shí)，var fn 變量沒有做為全局對(duì)象的一個(gè)屬性而存在，且 fn 引用的匿名函數(shù)上下文也沒有被初始化，所以在他之前調(diào)用失敗。

復(fù)制代碼代碼如下:

// 現(xiàn)在先把之前的調(diào)用邏輯給注釋掉，再看下控制臺(tái)的輸出

//    console.log('之前調(diào)用開始..');

//    fn();

//    console.log('之前調(diào)用結(jié)束..');

    var fn = function () {

        console.log('fn 函數(shù)【表達(dá)式】聲明執(zhí)行..')

        // code..

    }

    console.log('之后調(diào)用開始..');

    fn(); // 在表達(dá)式之后調(diào)用

    console.log('之后調(diào)用開始..');

　　控制臺(tái)打印結(jié)果：