javascript中聲明函數(shù)的方法有兩種:函數(shù)聲明式和函數(shù)表達式.

區(qū)別如下:

1).以函數(shù)聲明的方法定義的函數(shù),函數(shù)名是必須的,而函數(shù)表達式的函數(shù)名是可選的.

2).以函數(shù)聲明的方法定義的函數(shù),函數(shù)可以在函數(shù)聲明之前調(diào)用,而函數(shù)表達式的函數(shù)只能在聲明之后調(diào)用.

3).以函數(shù)聲明的方法定義的函數(shù)并不是真正的聲明,它們僅僅可以出現(xiàn)在全局中,或者嵌套在其他的函數(shù)中,但是它們不能出現(xiàn)在循環(huán),條件或者try/catch/finally中,而

    函數(shù)表達式可以在任何地方聲明.

下面分別用兩種方法定義函數(shù):

 //函數(shù)聲明式 function greeting(){    console.log("hello world");  }   //函數(shù)表達式 var greeting = function(){   console.log("hello world");  }

下面一個有趣的javascript:

function f() { console.log('I am outside!'); }(function () { if(false) {  // 重復(fù)聲明一次函數(shù)f  function f() { console.log('I am inside!'); } } f();}());

會輸出什么呢?第一反應(yīng)應(yīng)該是"I am outside"吧.  結(jié)果在chrome中輸出"I am inside",IE11直接報錯,firefox低一點的版本輸出"I am outside"...

chrome輸出的結(jié)果很明確的反應(yīng)了用函數(shù)聲明式聲明的函數(shù)的特點--函數(shù)在聲明之前就可以調(diào)用.

IE報錯顯示缺少對象,因為函數(shù)聲明在了條件里,違背了函數(shù)聲明式的原則.

函數(shù)表達式的作用域:

如果函數(shù)表達式聲明的函數(shù)有函數(shù)名,那么這個函數(shù)名就相當(dāng)于這個函數(shù)的一個局部變量,只能在函數(shù)內(nèi)部調(diào)用,舉個栗子:

var f = function fact(x) {         if (x <= 1)           return 1;        else           return x*fact(x-1);        };        alert(fact());  // Uncaught ReferenceError: fact is not defined

fact()在函數(shù)內(nèi)部可以調(diào)用,在函數(shù)外部調(diào)用就會報錯:fact未定義.
fact

我們再來詳細看下

函數(shù)聲明

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

代碼如下:

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

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

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

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

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

總結(jié)：

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

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

　　3：它可以影響變量對象（僅影響存儲在上下文中的變量）

函數(shù)表達式

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

代碼如下:

var fn = function () {  console.log('fn 函數(shù)【表達式】聲明執(zhí)行..')  // code..}

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

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

代碼如下:

// 為了清晰的看到控制臺的輸出，我們在各自調(diào)用前后做個標(biāo)記，增加可讀性。console.log('之前調(diào)用開始..');fn();console.log('之前調(diào)用結(jié)束..');var fn = function () {  console.log('fn 函數(shù)【表達式】聲明執(zhí)行..')  // code..}console.log('之后調(diào)用開始..');fn();console.log('之后調(diào)用開始..');

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

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

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

代碼如下:

// 現(xiàn)在先把之前的調(diào)用邏輯給注釋掉，再看下控制臺的輸出//  console.log('之前調(diào)用開始..');//  fn();//  console.log('之前調(diào)用結(jié)束..');  var fn = function () {    console.log('fn 函數(shù)【表達式】聲明執(zhí)行..')    // code..  }  console.log('之后調(diào)用開始..');  fn(); // 在表達式之后調(diào)用  console.log('之后調(diào)用開始..');

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

　　可以看出，在該表達式函數(shù)之后來調(diào)用是可以的，來總結(jié)下那是為什么呢？

總結(jié)：

　　1：首先變量本身不做為一個函數(shù)存在，而是一個匿名函數(shù)的引用（值類型的不屬于引用）

　　2：在代碼執(zhí)行階段，初始化全局上下文時，它沒有被做為全局的一個屬性而存在，所以不會造成變量對象的污染

　　3：該類型的聲明一般在插件的開發(fā)比較常見，也可做為閉包中回調(diào)函數(shù)的調(diào)用

　　所以 function fn () {} 并不等于 var fn = function () {} ，他們有本質(zhì)上的區(qū)別。

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