【JS】重溫基礎：閉包

  • 2019 年 10 月 5 日
  • 筆記

本章節複習的是JS中的關於閉包，這個小哥哥呀，看看。

前置知識： 聲明函數兩種方法：

  • 函數聲明，存在函數聲明提升，因此可以在函數聲明之前調用（不會報錯）。
fun();  // ok  function fun(){};
  • 函數表達式，不存在函數聲明提升，若定義前調用，會報錯（函數還不存在）。
fun();  // error  var fun = function (){};

1.概念

2.1 詞法作用域

這裡先要了解一個概念，詞法作用域：它是靜態的作用域，是書寫變數和塊作用域的作用域**。

function f (){      var a = "leo";      function g(){console.log(a)};      g();  }  f(); // "leo"

由於函數 g的作用域中沒有 a這個變數，但是它可以訪問父作用域，並使用父作用域下的變數 a，最後輸出 "leo"。

詞法作用域中使用的域，是變數在程式碼中聲明的位置所決定的。嵌套的函數可以訪問在其外部聲明的變數。

2.2 閉包

接下來介紹下閉包概念，閉包是指有權訪問另一個函數作用域中的變數的函數。

閉包是由函數以及創建該函數的詞法環境組合而成。這個環境包含了這個閉包創建時所能訪問的所有局部變數。

創建閉包的常見方式：在一個函數內創建另一個函數。如：

function f (){      var a = "leo";      var g = function (){          console.log(a);      };      return g;// 這裡g就是一個閉包函數，可以訪問到g作用域的變數a  }  var fun = f();  fun(); // "leo"

通過概念可以看出，閉包有以下三個特徵：

  • 函數嵌套函數
  • 函數內部可以引用函數外部的參數和變數
  • 參數和變數不會被垃圾回收機制回收

註：關於記憶體回收機制，可以查看阮一峰老師的《JavaScript 記憶體泄漏教程》。

另外，使用閉包有以下好處：

  • 將一個變數長期保存在記憶體中
  • 避免全局變數的污染
function f (){      var a = 1;      return function(){          a++;          console.log(a);      }  }  var fun = f();  fun(); // 2  fun(); // 3

因為垃圾回收機制沒有回收，所以每次調用 fun()都會返回新的值。

  • 私有化成員，使得外部不能訪問
function f (){      var a = 1;      function f1 (){          a++;          console.log(a);      };      function f2 (){          a++;          console.log(a);      };      return {g1:f1, g2:f2};  };  var fun = f();  fun.g1(); // 2  fun.g2(); // 3

2.易錯點

2.1 引用的變數發生變化

function f (){      var a = [];      for(var i = 0; i<10; i++){          a[i] = function(){              console.log(i);          }      }      return a;  }  var fun = f();  fun[0]();  // 10  fun[1]();  // 10  // ...  fun[10]();  // 10

原本照我們的想法， fun方法中每個元素上的方法執行的結果應該是 1,2,3,...,10，而實際上，每個返回都是 10，因為每個閉包函數引用的變數 i是 f執行環境下的變數 i，循環結束後， i已經變成 10，所以都會返回 10。 解決辦法可以這樣：

function f (){      var a = [];      for(var i = 0; i<10; i++){          a[i] = function(index){              return function(){                  console.log(index);                  // 此時的index，是父函數作用域的index，                  // 數組的10個函數對象，每個對象的執行環境下的index都不同              }          }(i);      };      return a;  };  var fun = f();  fun[0]();  // 0  fun[1]();  // 1  // ...  fun[10]();  // 10

2.2 this指向問題

var obj = {      name : "leo",      f : function(){          return function(){              console.log(this.name);          }      }  }  obj.f()();  // undefined

由於裡面的閉包函數是在 window作用域下執行，因此 this指向 window。

2.3 記憶體泄漏

當我們在閉包內引用父作用域的變數，會使得變數無法被回收。

function f (){      var a = document.getElementById("leo");      a.onclick = function(){console.log(a.id)};  }

這樣做的話，變數 a會一直存在無法釋放，類似的變數越來越多的話，很容易引起記憶體泄漏。我們可以這麼解決：

function f (){      var a = document.getElementById("leo");      var id = a.id;      a.onclick = function(){};      a = null;  //主動釋放變數a  }

通過把變數賦值成 null來主動釋放掉。

3.案例

3.1 經典案例——定時器和閉包

程式碼如下：

for(var i = 0 ; i<10; i++){      setTimeout(function(){          console.log(i);      },100);  }

不出所料，返回的不是我們想要的 0,1,2,3,...,9，而是10個 10。 這是因為js是單進程，所以在執行 for循環的時候定時器 setTimeout被安排到任務隊列中排隊等候執行，而在等待過程中， for循環已經在執行，等到 setTimeout要執行的時候， for循環已經執行完成， i的值就是 10，所以就列印了10個 10。 解決方法 ：

  • 1.使用ES6新增的 let。 把 for循環中的 var替換成 let。
  • 2.使用閉包 
for(var i = 0; i<10 ; i++){      (function(i){          setTimeout(function(){              console.log(i);          }, i*100);      })(i);  }

3.2 使用閉包解決遞歸調用問題

function f(num){      return num >1 ? num*f(num-1) : 1;  }    var fun = f;  f = null;  fun(4)   // 報錯 ，因為最好是return num* arguments.callee（num-1），arguments.callee指向當前執行函數，但是在嚴格模式下不能使用該屬性也會報錯，所以藉助閉包來實現

這裡可以使用 returnnum>1?num*arguments.callee(num-1):1;，因為 arguments.callee指向當前執行函數，但是在嚴格模式下不能使用，也會報錯，所以這裡需要使用閉包來實現。

function fun = (function f(num){      return num >1 ? num*f(num-1) : 1;  })

這樣做，實際上起作用的是閉包函數 f，而不是外面的 fun。

3.3 使用閉包模仿塊級作用域

ES6之前，使用 var聲明變數會有變數提升問題：

for(var i = 0 ; i<10; i++){console.log(i)};  console.log(i);  // 變數提升 返回10

為了避免這個問題，我們這樣使用閉包（匿名自執行函數）：

(function(){      for(var i = 0 ; i<10; i++){console.log(i)};  })()  console.log(i);  // undefined

我們創建了一個匿名的函數，並立即執行它，由於外部無法引用它內部的變數，因此在函數執行完後會立刻釋放資源，關鍵是不污染全局對象。這裡 i隨著閉包函數的結束，執行環境銷毀，變數回收。 但是現在，我們用的更多的是ES6規範的 let和 const來聲明。

參考文章：

  1. MDN 閉包
  2. 《JavaScript高級程式設計》

本部分內容到這結束

VirMach 便宜 VPS

QNews

QNews