【重溫基礎】19.閉包

pingan8787發表於2019-01-23

本文是 重溫基礎 系列文章的第十九篇。今日感受：將混亂的事情找出之間的聯絡，也是種能力。

系列目錄：

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

前置知識：
宣告函式兩種方法：

  • 函式宣告，存在函式宣告提升，因此可以在函式宣告之前呼叫（不會報錯）。
fun();
  // okfunction fun(){
  };
複製程式碼
  • 函式表示式，不存在函式宣告提升，若定義前呼叫，會報錯（函式還不存在）。
fun();
  // errorvar 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();
 // 2fun();
 // 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();
 // 2fun.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]();
  // 10fun[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]();
  // 0fun[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指向當前執行函式，但是在嚴格模式下不能使用該屬性也會報錯，所以藉助閉包來實現複製程式碼

這裡可以使用return num >
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高階程式設計》

本部分內容到這結束

Author 王平安
E-mail pingan8787@qq.com
博 客 www.pingan8787.com
微 信 pingan8787
每日文章推薦 github.com/pingan8787/…
JS小冊 js.pingan8787.com

來源：https://juejin.im/post/5c487a84e51d45599635ba16

相關文章