「JavaScript」函數聲明和函數表達式

Kerr1Gan 發布于2019-08-22 18:43 / 429人閱讀

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

1.定義

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

函數聲明

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

函數表達式

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

2.實例解析

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

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

可以先在腦海中想一下答案，執行結果是：

函數聲明
函數表達式
函數表達式

來，我們分析一下這個結果：

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

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

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

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

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

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

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

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

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

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

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

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

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

3.總結

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

GPU云服務器云服務器函數聲明聲明式函數提前聲明函數復雜函數聲明

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96136.html

深入理解javascript中的立即執行函數(function(){…})()

摘要：要理解立即執行函數，需要先理解一些函數的基本概念。函數表達式使用關鍵字聲明一個函數，但未給函數命名，最后將匿名函數賦予一個變量，叫函數表達式，這是最常見的函數表達式語法形式。 javascript和其他編程語言相比比較隨意，所以javascript代碼中充滿各種奇葩的寫法，有時霧里看花，當然，能理解各型各色的寫法也是對javascript語言特性更進一步的深入理解。 ( functio...

melody_lql 2019-08-20 15:28 評論0 收藏0
【滲透】關于Javascript的函數聲明和函數表達式

摘要：而函數表達式的值是在運行時確定，并且在表達式賦值完成后，該函數才能調用。 Javascript定義函數有兩種類型函數聲明 // 函數聲明 function wscat(type){ return type===wscat; } 函數表達式 // 函數表達式 var oaoafly = function(type){ return type===oaoafly; } 先...

zhaochunqi 2019-08-22 18:26 評論0 收藏0
JavaScript—— 函數聲明和函數表達式有什么不同嗎？

摘要：函數聲明和函數表達式的區別函數聲明只能出現在程序或函數體內。所以，在等語義為語句的代碼塊中存在函數聲明，由于函數提升特性，會破壞掉原本的語義。這篇談一下JS函數聲明與函數表達式的區別及要注意的地方：函數聲明主要有兩種類型：函數聲明 function fn() {}; 函數表達式 var fn = function () {}; 這兩種函數創建方式...

FleyX 2019-08-20 16:36 評論0 收藏0
js中(function(){…})()立即執行函數寫法理解

摘要：和是兩種立即執行函數的常見寫法，最初我以為是一個括號包裹匿名函數，再在后面加個括號調用函數，最后達到函數定義后立即執行的目的，后來發現加括號的原因并非如此。 javascript和其他編程語言相比比較隨意，所以javascript代碼中充滿各種奇葩的寫法，有時霧里看花，當然，能理解各型各色的寫法也是對javascript語言特性更進一步的深入理解。 ( function(){…} )...

YJNldm 2019-08-21 10:36 評論0 收藏0
先有蛋還是先有雞？JavaScript 作用域與閉包探析

摘要：而閉包的神奇之處正是可以阻止事情的發生。拜所聲明的位置所賜，它擁有涵蓋內部作用域的閉包，使得該作用域能夠一直存活，以供在之后任何時間進行引用。依然持有對該作用域的引用，而這個引用就叫閉包。引子先看一個問題，下面兩個代碼片段會輸出什么？ // Snippet 1 a = 2; var a; console.log(a); // Snippet 2 console.log(a); v...

elisa.yang 2019-08-21 15:13 評論0 收藏0