[[438672]]

本文轉載自微信公眾號「前端萬有引力」，作者一川。轉載本文請聯系前端萬有引力公眾號。

1寫在前面

在Javascript編程中，閉包是個相當重要且難以理解的概念，并且與作用域知識是密切相關的。那么：

• Javascript中的作用域是什么意思呢?
• 閉包會在哪些場景中使用呢?
• 通過定時器循環輸出自增的數字，通過JS代碼如何實現呢?

2作用域

作用域：指的是變量的作用范圍，即變量能夠被訪問到的范圍。

es5之前只有：全局作用域和函數作用域

es6之后新增：塊級作用域

2.1 全局作用域

在Javascript中，全局變量是掛載到window頂級對象下的變量，因此在網頁中的任何位置都可以進行使用，并且可以訪問到這個全局變量。

function getName(){ 
  var name = "inner"; 
  console.log(name);//"inner" 
} 
 
getName(); 
console.log(name);//name is not defined 

使用全局變量的缺點是：定義很多全局變量的時候，會容易引起變量命名的沖突。因此定義全局變量的時候，要注意作用域的訪問范圍。

2.2 函數作用域

函數作用域：除了函數內部能夠進行訪問外，其他地方都是不能夠訪問的。且此函數執行完畢后，定義在函數作用域的局部變量也會被銷毀。

function getName(){ 
  var name = "inner"; 
  console.log(name);//"inner" 
} 
 
getName(); 
console.log(name);//name is not defined 

2.3 塊級作用域

塊級作用域最直接的表現是：新增的let關鍵字，使用let關鍵字定義的變量只能在塊級作用域中被訪問。這是因為其具有暫時性死區的特點：這個變量在定義之前是不能夠被使用的。

在Javascript中，if語句、try...catch...、switch以及for等語句后面{...}里面所包括的都是塊級作用域。

console.log(name);//name is not defined 
if(true){ 
  let name = "yichuan"; 
  console.log(name);//"yichuan" 
} 
console.log(name);//name is not defined 

3閉包

在《Javscript高級程序設計》中是這樣定義閉包的：閉包指有權訪問另外一個函數作用域中的變量的函數。

在MDN中是這樣定義的：一個函數和對其周圍狀態(lexical environment，詞法環境)的引用捆綁在一起(或者說函數被引用包圍)，這樣的組合就是閉包(closure)。也就是說，閉包讓你可以在一個內層函數中訪問到其外層函數的作用域。在 JavaScript 中，每當創建一個函數，閉包就會在函數創建的同時被創建出來。

對于我們理解，其實閉包就是一個可以訪問其它函數內部變量的函數。

通常情況下，函數內部變量是無法在函數外部進行訪問的，因此使用閉包的作用就是突破這種限制，使得具備了能夠在函數外部訪問此函數內部變量的功能。

function func1(){ 
  var name = "yichuan"; 
  return function(){ 
    console.log(name); 
  } 
} 
 
func1();//此處返回的是一個function函數 
var result = func1();//使用result接收這個return出來的函數 
result();//1 

我們看上面的代碼其實就已經具有閉包的特點，就是可以在func函數外部去訪問name的值。

我們分析下閉包產生的原因，這就需要先理解什么是作用域鏈。

作用域鏈：當訪問一個變量時，代碼解釋器會首先在當前作用域進行查找，如果沒有查找到，就會去父級作用域進行查找，知道找到該變量或者不存在父級作用域中。

var name = "outer"; 
console.log(name);//outer 
function func1(){ 
  var name = "inner"; 
  console.log(name);//inner 
  function func2(){ 
    var name = "self"; 
    console.log(name);//self 
  } 
  function func3(){ 
    console.log(name);//inner 
  } 
  func2(); 
  func3(); 
} 
 
function func4(){ 
  function func5(){ 
    console.log(name);//outer 
  } 
} 
 
func1(); 
func4(); 

我們看到，在函數func2中使用name變量，他會現在func2中查找到name變量并使用它的值。在函數func3中沒有name變量，它就會沿著作用域鏈向上查找到func1函數中的name變量并使用。在函數func5中，查找并沒有name變量，它就會去func4函數中查找也沒有，就接著去全局變量查找到name變量并使用。

閉包產生本質就是：當前環境中存在指向父級作用域的引用。

function func1(){ 
  var name = "inner"; 
  function func2(){ 
    console.log(name);//inner 
  } 
  return func2; 
} 
var result = func1(); 
result(); 

是不是只有返回函數的形式才能說產生了閉包呢?當然不是呀，只要讓父級作用域的引用存在即可。

var func2; 
function func1(){ 
  var name = "yichuan"; 
  func2 = function(){ 
    console.log(name); 
  } 
} 
func1(); 
func2();//"yichuan" 

所以閉包有哪些表現形式呢?

• 直接返回一個函數
• 在定時器、事件監聽、ajax請求、web workers或者任何異步中只要使用到了回調函數，實際上就是在使用閉包
• 作為函數參數傳遞的形式
• 立即執行函數IIFE，創建了閉包，保存了全局作用域window和當前函數作用域，因此可以輸出全局的變量

//定時器 
setTimeout(function(){ 
  console.log("yichuan"); 
},1000); 
 
//事件監聽 
const container = document.getElementById("app"); 
container.addEventListener("click",function(){ 
  console.log("event listener"); 
}); 
 
//函數參數傳遞 
var name = "yichuan"; 
function func1(){ 
  var name = "onechuan"; 
  function func2(){ 
    console.log(name); 
  } 
  func3(func2); 
} 
 
function func3(func){ 
  func();//閉包 
} 
func1();//輸出"onechuan" 
 
//立即執行函數 
var name = "yihchuan"; 
(function(){ 
   console.log(name);//"yichuan" 
})(); 

那么，我們應該如何應用閉包解決循環問題呢?

4面試中常考的循環打印問題

例如：在循環中是否是期望的，打印出來的是1、2、3、4、5呢?

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

答案是否定的，最終打印出來是五個6。這是為什么呢?

這是因為：setTimeout是宏任務，由于js中單線程EventLoop機制，在主線程同步任務執行完畢后才會去執行宏任務，因此循環結束后setTimeout中的回調才會依次執行。而setTimeout函數也是一種閉包，沿著作用域鏈往上找它的父級作用域就是window，而變量i是window上的全局變量。等開始執行setTimeout函數之前變量i就已經變成了6了，因此最后輸出的數值就是5個6。

那么如何解決呢?

//使用立即執行函數 
for(var i = 1; i <= 5; i++){ 
  (function(j){ 
    setTimeout(function(){ 
      console.log(j); 
    },0); 
  })(i) 
} 
 
//使用es6中let 
for(let i = 1; i <= 5; i++){ 
  setTimeout(function(){ 
    console.log(i); 
  },0); 
} 

還有個很難想到的方法，就是使用setTimeout的隱藏的第三個參數。

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

附加參數，一旦定時器到期，它們會作為參數傳遞給function。但是得注意：IE9 及更早的 IE 瀏覽器不支持向回調函數傳遞額外參數(第一種語法)。

5參考文章

《Javascript核心原理精講》

《MDN》

《Javascript高級程序設計》

6寫在后面

閉包的使用在日常的javascript編程中經常出現，使用的場景比較多且復雜，需要讀者仔細分析。本篇文章講到了關于作用域和閉包的知識，其中作用域根據變量的作用范圍分為：全局作用域、函數作用域以及塊級作用域。而閉包就是一個可以訪問其它函數內部變量的函數，在解決for循環打印的問題可以使用立即執行函數、setTimeout的第三參數、es6中的let關鍵字解決。

注意：閉包在實際開發要注意不要濫用，容易引起內存泄漏。