關於閉包和javascript函式表示式的一點理解

阿新 • • 發佈：2019-01-14

前言：看了很多閉包的部落格，總結一下。也是對自己的一種鍛鍊和加深自己的理解。前端自學中，歡迎大家指點，謝謝~

一、函式表示式

定義函式表示式的方式有兩種：一種是函式宣告，一種是函式表示式

1.函式宣告

function fun() {
//函式體
}

用函式宣告去定義一個函式用關鍵字function，後面加函式名，用name屬性可以得到函式名

alert(fun.name);//fun

函式宣告最重要的特徵是函式宣告提升，通俗一點就是說可以把函式宣告可以放在函式呼叫後面。

sayhi();
function sayhi() {
}

2.函式表示式

var sayhi = function() {
//函式主體
}

函式表示式的呼叫不能在函式表示式之前，必須在後面。

二、閉包

為什麼在介紹閉包之前要寫函式宣告方式呢？那接下來我要講的和這個有關係

首先講一下聲什麼是閉包，《javascript高階程式設計設計》裡面是這樣定義的：閉包是指有權訪問另一個函式作用域中的變數的函式。那按照這句話的意思就是閉包是一個函式咯，網上很多關於閉包的文章都提到閉包的本質是一個連線函式內部和外部的橋樑。所以閉包有兩個作用：一是讀取函式內部的變數。而是讓這些變數一種保持在記憶體中。

先給出一個問題吧？

怎麼去實現將數字0~9每過一秒依次彈出？

舉個例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>閉包</title>
  </head>
  <body>
  </body>
  <script type="text/javascript">
    function fun() {
      for (var i = 0; i < 10; i++) {
         (function(i){
           setTimeout(function(){
            alert(i);
           },(i+1)*1000);
         })(i);
        }
      }
    fun();
  </script>
</html>

執行上面的函式，得到的結果是每過一秒依次輸出0，1，2，3，4，5，6，7，8，9

換一種寫法，如下

      for (var i = 0; i < 10; i++) {
          setTimeout(function(){
            alert(i);
          },(i+1)*1000)
        }

得到的結果是每過一秒依次輸出10，10，10，10，10，10，10，10，10

為什麼會這樣？匿名函式裡面的alert（i）可以讀取到外部函式的i值，這就是閉包。兩種寫法都可以得到讀取到i，但第一種可以得到每一次for迴圈的i值，第二張卻不行呢？

這一點我認為和閉包沒關係，但是我看過的很多關於閉包的文章都把這兩點混為一談，下面是我的一點理解

先說為什麼第二種不行，setTimeout定時函式裡面的回撥函式function它只是宣告函數了，但沒有呼叫（這也是為什麼開始講函式宣告和函式呼叫），所以每次for迴圈的時候，i都在變化，而function沒有執行。只有在for迴圈執行完i = 10的時候，定時函式呼叫了這個匿名函式。所以輸出都是10.

那第一種為什麼可以？第一中在setTimeout函式外部用一個匿名函式，然後讓它自執行，傳入引數i，當for迴圈的時候，i傳入匿名函式的時候會複製一份變數i，也就是i從0到9都複製保持在該匿名函式的作用域中，故定時函式裡的匿名函式可以正確輸出i。

最後，歡迎大家指正和討論，祝大家技術進步，早日成為大神!

關於閉包和javascript函式表示式的一點理解

關於閉包和javascript函式表示式的一點理解

好程式設計師前端教程之JavaScript閉包和匿名函式的關係詳解

JS（二）-閉包和箭頭函式

全面理解Javascript閉包和閉包的幾種寫法及用途【轉】

全面理解Javascript閉包和閉包的幾種寫法及用途

javascript分析閉包和回撥函式

javascript閉包和立即執行函式

JavaScript關於閉包，匿名函式，this，物件等的一些理解

javascript學習：閉包和prototype原型使用基礎

JavaScript學習總結（三、函數聲明和表達式、this、閉包和引用、arguments對象、函數間傳遞參數）

JavaScript中的閉包和作用域鏈

javascript 閉包 this 匿名函式匿名物件

一個關於javascript閉包和this的題目

閉包、箭頭函式、generator JavaScript邊學邊記（五）

【慕課網】JavaScript閉包和作用域

C#——委託、Lambda表示式、閉包和記憶體洩漏

函式中的閉包和裝飾器

關係規範化之函式依賴集閉包和屬性集X對於函式依賴集F的閉包

資料庫基礎（4）函式依賴公理和推論（Armstrong公理），屬性閉包和求候選鍵的技巧

Lua，JavaScript的閉包和迭代器筆記

關於閉包和javascript函式表示式的一點理解

相關推薦