淺談javascript 函數運算式和函式宣告的區別，淺談javascript

淺談javascript 函數運算式和函式宣告的區別，淺談javascript

javascript中聲明函數的方法有兩種:函式宣告式和函數運算式.

區別如下:

1).以函式宣告的方法定義的函數,函數名是必須的,而函數運算式的函數名是可選的.

2).以函式宣告的方法定義的函數,函數可以在函式宣告之前調用,而函數運算式的函數只能在聲明之後調用.

3).以函式宣告的方法定義的函數並不是真正的聲明,它們僅僅可以出現在全域中,或者嵌套在其他的函數中,但是它們不能出現在迴圈,條件或者try/catch/finally中,而

    函數運算式可以在任何地方聲明.

下面分別用兩種方法定義函數:

 //函式宣告式 function greeting(){    console.log("hello world");  }   //函數運算式 var greeting = function(){   console.log("hello world");  }

下面一個有趣的javascript:

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

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

chrome輸出的結果很明確的反應了用函式宣告式聲明的函數的特點--函數在聲明之前就可以調用.

IE報錯顯示缺少對象,因為函式宣告在了條件裡,違背了函式宣告式的原則.

函數運算式的範圍:

如果函數運算式聲明的函數有函數名,那麼這個函數名就相當於這個函數的一個局部變數,只能在函數內部調用,舉個栗子:

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()在函數內部可以調用,在函數外部調用就會報錯:fact未定義.
fact

我們再來詳細看下

函式宣告

　　函式宣告範例程式碼

代碼如下:

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

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

代碼如下:fn(); // 在之前調用我們聲明的fn函數 function 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 () {} ，他們有本質上的區別。

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

您可能感興趣的文章:

• Javascript中的函式宣告與函數運算式(奇技淫巧)
• javascript 函式宣告與函數運算式的區別介紹
• Javascript學習筆記之 函數篇（一） : 函式宣告和函數運算式
• javascript函式宣告和函數運算式區別分析
• js中函式宣告與函數運算式