「JavaScript」函數(shù)聲明和函數(shù)表達式

Kerr1Gan 發(fā)布于2019-08-22 18:43 / 434人閱讀

摘要：函數(shù)表達式的值是在運行時確定，并且在表達式賦值完成后，該函數(shù)才能調(diào)用

1.定義

在javascript中我們定義函數(shù)有以下兩種方式：

函數(shù)聲明

  function say(){
     console.log("函數(shù)聲明");
  }

函數(shù)表達式

   var say = function(){
      console.log("函數(shù)表達式");
   }

2.實例解析

在平時開發(fā)中，它們有著難以察覺的差別，我們看下下面的例子：

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

可以先在腦海中想一下答案，執(zhí)行結(jié)果是：

函數(shù)聲明
函數(shù)表達式
函數(shù)表達式

來，我們分析一下這個結(jié)果：

1.第一次調(diào)用say函數(shù)時，函數(shù)還未被定義，那為什么可以打印出“函數(shù)聲明”這個值呢？原因在于

javascript解釋器中存在一種變量聲明被提升的機制，也就是說函數(shù)聲明會被提升到作用域的最前面，即使寫代碼的時候是寫在最后面，也還是會被提升至最前面。
而用函數(shù)表達式創(chuàng)建的函數(shù)是在運行時進行賦值，且要等到表達式賦值完成后才能調(diào)用

因此，即使函數(shù)還未被定義，但是函數(shù)聲明已經(jīng)被提升到最前面了，上面那段代碼相當于：

    var say; //變量被提升，此時的值為undefined
    say();// 函數(shù)被提升，輸出“函數(shù)聲明”
    var say = function(){
          console.log("函數(shù)表達式");
    }
    say();
    function say(){
     console.log("函數(shù)聲明");
    }
    say();

從下面兩個的對比，更能理解“函數(shù)聲明提升”這個概念：
1.

var say;
console.log(say);
say();
function say(){
   console.log("函數(shù)聲明");
}

輸出：
f say(){
   console.log("函數(shù)聲明");
}
函數(shù)聲明

var say;
console.log(say);
say();
var say = function(){
   console.log("函數(shù)表達式");
}

輸出：
undefined
Uncaught TypeError: say is not a function
    at :3:1

2.第二次調(diào)用say函數(shù)時，我們可以先簡單理解為此時的函數(shù)表達式覆蓋了函數(shù)聲明，因此輸出了‘函數(shù)表達式’，然而到了第三次調(diào)用say函數(shù)時，此時打印的竟然還是‘函數(shù)表達式’？？為什么后面的函數(shù)聲明沒有覆蓋前面的函數(shù)表達式呢？其實在運行時由于函數(shù)聲明提升的原因，實際上運行的順序是類似于這樣的：

var say; //函數(shù)表達式中的var提前，值為undefined

function say() {
    console.log("函數(shù)聲明");
}//因為函數(shù)聲明提升，所以在最前面運行了

say(); //函數(shù)聲明
say = function() { //給say賦值函數(shù)
    console.log("函數(shù)表達式");
}
say();//函數(shù)表達式
say();//函數(shù)表達式

3.總結(jié)

1.函數(shù)聲明在JS解析時進行函數(shù)提升，因此在同一個作用域內(nèi)，不管函數(shù)聲明在哪里定義，該函數(shù)都可以進行調(diào)用。
2.函數(shù)表達式的值是在JS運行時確定，并且在表達式賦值完成后，該函數(shù)才能調(diào)用