【機制】js的閉包、執行上下文、作用域鏈

木子草明發表於2021-02-03
JS

1.從閉包說起

什麼是閉包

一個函式和對其周圍狀態（詞法環境）的引用捆綁在一起，這樣的組合就是閉包。
也就是說，閉包讓你可以在一個內層函式中訪問到其外層函式的作用域。
在 JavaScript 中，每當建立一個函式，閉包就會在函式建立的同時被建立出來。

上面是MDN對閉包的解釋，這幾句話可能不太好懂，沒關係，我們先來看下能懂的：

  • 閉包是和函式有關
  • 這個函式可以訪問它外層函式的作用域
  • 從定義看，每個函式都可以稱為閉包

雖然從定義來看，所有函式都可以稱為閉包，但是當我們在討論它的時候，一般是指這種情況：

    //code-01
    function cat() {
      var name = "小貓";
      function say() {
        console.log(`my name is ${name}`);
      }
      return say;
    }
    var fun = cat();
    //---cat函式已經執行完,下面卻還能夠訪問到 say函式的內部變數 name
    fun();
    //> my name is 小貓

當一個函式的返回值是一個內部函式時（cat函式返回say函式），在這個函式已經執行完畢後，這個返回的內部函式還可以訪問到已經執行完畢的函式的內部變數，就像 code-01中fun可以訪問到cat函式的name，一般我們談論的閉包就是指這種情況。
那麼這是什麼原因呢？這就涉及到函式的作用域鏈和執行上下文的概念了,我們下面分別來說。

2.執行上下文

定義
什麼是執行上下（Execution context ）呢？簡單來說就是全域性程式碼或函式程式碼執行的時候的環境，它包含三個部分內容：

  • 1.變數物件(Variable object,vo)，
  • 2.作用域鏈(Scope chain,sc)
  • 3.this的指向(這篇先不談)

我們用一個物件來表示：

  EC = {
      vo：{},
      sc：[],
      this
  }

然後程式碼或函式需要什麼變數的時候，就會在這裡面找。

建立時間
執行上下文（EC）是什麼時候建立的呢？這裡分為兩種情況：

  • 全域性程式碼：程式碼開始執行，但是還沒有執行具體程式碼之前
  • 函式程式碼：函式要執行的時候，但是還沒值執行具體程式碼之前

其實如果把全域性的程式碼理解為一個大的函式，這兩者就可以統一了。
每一個函式都會建立自己的執行上下文，他們以棧的形式儲存在一起，當函式執行完畢，則把它自己的執行上下文出棧，這就叫執行上下文棧(Execution context stack,ECS)
下面我們通過一段程式碼例項來看一下

宣告語句與變數提升
具體分析之前，我們先來說宣告語句，什麼是宣告語句呢？

  • 宣告語句是用來宣告一個變數，函式，類的語句
  • 比如：var，let，const，function,class
  • 其中 var 和 function 會造成變數提升，其他不會，如果var和function同名的話，則函式宣告優先
    那什麼是變數提升呢？
    // code-02
    console.log(varVal); // 輸出undefined
    console.log(fun); // 輸出  fun(){console.log('我是函式體') }，
    //console.log(letVal) //報錯 letVal is not defined

    var varVal = "var 宣告的變數";
    let letVal = "let 宣告的變數";

    function fun() {
      console.log("我是函式體");
    }
    var fun = "function"; //與函式同名，函式優先，但是可以重新賦值

    console.log(varVal); // >> "var 宣告的變數"
    console.log(letVal); // >> "let 宣告的變數"
    //fun(); // 報錯,因為fun被賦值為'function'字串了

    var name = "xiaoming";

在js執行程式碼的時候，會先掃一遍程式碼，把var，function的宣告先執行，var宣告的變數會先賦值為undefined，function宣告的函式會直接就是函式體,這就叫變數提升,而其他的宣告，比如let，則不會。
所以在變數賦值之前，console.log(varVal),console.log(fun)可以執行，而console.log(letVal)則會報錯。
其中fun被重新宣告為'function'字串，但是在變數提升的時候，函式優先，所以console.log(fun)列印出來的是函式體，而程式碼執行賦值語句的時候，fun被賦值成了字串，所以fun()會報錯

程式碼執行過程分析--變數物件
我們先上一段簡單的程式碼，通過這段程式碼，來分析一下 執行上下文建立和作用的過程，對其內容我們先只涉及變數物件vo:

//code-03
var name = 'xiaoming'

function user(name){
   var age = 27
   console.log(`我叫${name},今年${age}`)
}
user(name)
console.log(name)

我們現在來分析一下這段程式碼執行過程中，執行上下文的作用過程，會加入變數物件vo，作用域鏈scope會在下面講，this的指向這次不講，所以就不加上去了

1.程式碼執行之前，先建立 全域性的執行上下文G_EC,並壓入執行上下棧ECS

ECS = [
  G_EC : {
    vo:{
      name:undefined,
      user(name){ 
        var age = 27
        console.log(`我叫${name},今年${age}`)
      },
    },
    sc
  }
]

2.程式碼開始執行，name被賦值，執行user(name)
3.函式執行的時候，具體程式碼還沒執行之前，建立函式執行上下文user_EC，並壓入ECS

ECS = [
  user_EC : {
    vo:{
      name:undefined,
      age:undefined,
    },
    sc
  },
  G_EC : {
    vo:{
      name:'xiaoming',
      user(name){ 
        var age = 27
        console.log(`我叫${name},今年${age}`)
      }
    },
    sc
  }
]

4.開始執行函式程式碼，給形參name賦值，變數age賦值，執行console.log的時候需要變數name，age,於是從它自己的執行上下文user_EC中的變數物件vo裡開始查詢

ECS = [
  user_EC : {
    vo:{
      name:'xiaoming',
      age:27,
    },
    sc
  },
  G_EC : {
    vo:{
      name:'xiaoming',
      user(name){ 
        var age = 27
        console.log(`我叫${name},今年${age}`)
      }
    },
    sc
  }
]

5.發現找到了，於是列印 我叫xiaoming,今年27,至此函式user執行完畢了，於是把其對應的執行上下文user_EC出棧

ECS = [
  G_EC : {
    vo:{
      name:'xiaoming',
      user(name){ 
        var age = 27
        console.log(`我叫${name},今年${age}`)
      }
    },
    sc
  }
]

6.程式碼繼續執行，console.log(name),發現需要變數那麼，於是從它自己的執行上下文中的變數物件開始查詢，也就是G_EC中的vo，順利找到，於是列印"xiaoming"
7.至此程式碼執行結束，但全域性的執行上下文好像要等到當前頁面關閉才出棧（瀏覽器環境）

3.作用域鏈

上面我們分析程式碼執行過程的時候，有說到如果要用到變數的時候，就從當前執行上下文中的變數物件vo裡查詢，我們剛好是都有找到。
那麼如果當前執行上下文中的變數物件中沒有需要用的變數呢？根據我們的經驗，它會從父級的作用域來查詢，那麼這是根據什麼來查詢的呢?
所有接下來我們繼續來看 '作用域鏈'（scope chain,sc），它也是執行上下文得另一個組成部分。
** 函式作用域 **
在說執行上下中的作用域鏈之前，我們要先來看看函式作用域，那麼這是個什麼東西呢？

  • 每一個函式都有一個內部屬性【scope】
  • 它是函式建立的時候構建的
  • 它是一個列表，會把函式的所有父輩的執行上下中的變數物件存在其中
    舉個例子：
//code-04
function fun_1(){
  function fun_2(){}
}

1.我們看上面的程式碼，當fun_1函式建立的時候，它的父級執行上下文是全域性執行上下文 G_EC,所以fun_1的函式作用域【scope】為：

fun_1.scope = [
  G_EC.vo
]

2.當fun_2函式建立的時候，它的所有父級執行上下文有兩個，一個是全域性執行上下文 G_EC, 還有一個是函式fun_1的執行上下文 fun_1_EC, 所以fun_2的函式作用域【scope】為：

fun_1.scope = [
  fun_1_EC.vo,
  G_EC.vo
]

執行上下文的作用域鏈
上面我們說的是函式作用域,它包含了所有父級執行上下的變數物件，但是我們發現它沒有包含函式自己的變數物件，因為這個時候函式只是宣告瞭，還沒有執行，而函式的執行上下文是在函式執行的時候建立的。
當函式執行的時候，會建立函式的執行上下文,從上面我們知道，這個時候會建立執行上下文的變數物件vo，而賦值執行上下文的作用域鏈sc的時候，會把vo加在scope前面，作為一個佇列，賦值給作用域鏈，
就是說：EC.sc = [EC.vo,...fun.scope],我們下面舉例說明，這段程式碼與code-03的區別只是不給函式傳參，所以會用到父級作用域的變數。

//code-05
var name = 'xiaoming'

function user(){
   var age = 27
   console.log(`我叫${name},今年${age}`)
}
user()
console.log(name)

1.程式碼執行之前，先建立 全域性的執行上下文G_EC,並壓入執行上下棧ECS,同時賦值變數物件vo、作用域鏈sc，注意：當函式user被宣告的時候，會帶有函式作用域user.scope

ECS = [
  G_EC : {
    vo:{
      name:undefined,
      user // user.scope:[G_EC.vo]
    },
    sc:[G_EC.vo]
  }
]

2.程式碼開始執行，name被賦值，執行user()
3.函式執行的時候，具體程式碼還沒執行之前，建立函式執行上下文user_EC，並壓入ECS,同時賦值變數物件vo和作用域鏈sc:

ECS = [
  user_EC : {
    vo:{
      age:undefined,
    }，
    sc:[user_EC.vo, ...user.scope]
  },
  G_EC : {
    vo:{
      name:'xiaoming',
      user // user.scope:[G_EC.vo]
    },
    sc:[G_EC.vo]
  }
]

4.開始執行函式程式碼，給變數age賦值，執行console.log的時候需要變數name，age,這裡我們上面說是從變數物件裡找，這裡更正一下，其實是從作用域鏈中查詢

ECS = [
  user_EC : {
    vo:{
      age:27,
    },
    sc:[user_EC.vo, ...user.scope]
  },
  G_EC : {
    vo:{
      name:'xiaoming',
      user, // user.scope:[G_EC.vo]
    },
    sc:[G_EC.vo]
  }
]

5.我們發現在作用域鏈的第一個物件中(user_EC.vo)找到了age,但是沒有name，於是開始查詢作用域鏈的第二個物件，依次往下找，如果都沒找到，則會報錯。
這裡的話，我們發現作用域鏈的第二個元素user.scope析構出來的，也就是G_EC.vo,這個裡面有找到name='xiaoming'
於是列印 我叫xiaoming,今年27,至此函式user執行完畢了，於是把其對應的執行上下文user_EC出棧

ECS = [
  G_EC : {
    vo:{
      name:'xiaoming',
      user, // user.scope:[G_EC.vo]
    },
    sc:[G_EC.vo]
  }
]

6.程式碼繼續執行，console.log(name),發現需要變數那麼，於是從它自己的執行上下文中的作用域鏈開始查詢，在第一個元素G_EC.vo就順利找到，於是列印"xiaoming"
7.至此程式碼執行結束，

4.迴歸到閉包的問題

到此為止我們介紹完了執行上下文，那麼現在我們迴歸到剛開始的閉包為什麼能訪問到已經執行完畢了的函式的內部變數問題。我們再來回顧一下程式碼：

    //code-06
    function cat() {
      var name = "小貓";
      function say() {
        console.log(`my name is ${name}`);
      }
      return say;
    }
    var fun = cat();
    fun();

我們來照上面的步驟來分析下程式碼：
1.程式碼執行之前，先建立 全域性的執行上下文G_EC,並壓入執行上下棧ECS,同時賦值變數物件vo、作用域鏈sc

ECS = [
  G_EC : {
    vo:{
      fun:undefined,
      cat, // cat.scope:[G_EC.vo]
    },
    sc:[G_EC.vo]
  }
]

2.程式碼開始執行，執行cat()函式
3.函式執行的時候，具體程式碼還沒執行之前，建立函式執行上下文cat_EC，並壓入ECS,同時賦值變數物件vo和作用域鏈sc:

ECS = [
  cat_EC : {
    vo:{
      name:undefined,
      say, // say.scope:[cat_EC.vo,G_EC.vo]
    }，
    sc:[cat_EC.vo, ...cat.scope]
  },
  G_EC : {
    vo:{
      fun:undefined,
      cat, // cat.scope:[G_EC.vo]
    },
    sc:[G_EC.vo]
  }
]

4.開始執行函式程式碼，給變數name賦值，然後返回say函式，這個時候函式執行完畢，它的值被付給變數fun,它的執行上下文出棧

ECS = [
  G_EC : {
    vo:{
      fun:say, // say.scope:[cat_EC.vo,G_EC.vo]
      cat // cat.scope:[G_EC.vo]
    },
    sc:[G_EC.vo]
  }
]

5.程式碼繼續執行，到了fun(),
6.當函式要執行，還沒執行具體程式碼之前，建立函式執行上下文fun_EC，並壓入ECS,同時賦值變數物件vo和作用域鏈sc:

ECS = [
  fun_EC : {
    vo:{}，
    sc:[fun_EC.vo, ...fun.scope]//fun==cat,所以fun.scope = say.scope = [cat_EC.vo,G_EC.vo]
  },
  G_EC : {
    vo:{
      fun:say, // say.scope:[cat_EC.vo,G_EC.vo]
      cat // cat.scope:[G_EC.vo]
    },
    sc:[G_EC.vo]
  }
]

7.函式fun開始執行具體程式碼：console.log(my name is ${name}),發現需要變數name,於是從他的fun_EC.sc中開始查詢，第一個fun_EC.vo沒有，於是找第二個cat_EC.vo,發現這裡有name="小貓",
於是列印 my name is 小貓,至此函式fun執行完畢了，於是把其對應的執行上下文fun_EC出棧

ECS = [
  G_EC : {
    vo:{
      fun:say, // say.scope:[cat_EC.vo,G_EC.vo]
      cat // cat.scope:[G_EC.vo]
    },
    sc:[G_EC.vo]
  }
]

8.至此程式碼執行結束

到這裡我們知道閉包為什麼可以訪問到已經執行完畢的函式的內部變數，是因為在的執行上下文中的作用域鏈中儲存了變數的引用，而儲存的引用的變數不會被垃圾回收機制所銷燬。

閉包的優缺點
優點：

  1. 可以建立擁有私有變數的函式，使函式具有封裝性
  2. 避免全域性變數汙染

缺點：

  1. 增大記憶體消耗

參考
1.JavaScript深入之詞法作用域和動態作用域
2.JavaScript深入之執行上下文棧
3.setTimeout和setImmediate到底誰先執行，本文讓你徹底理解Event Loop

相關文章