深入淺出Javascript閉包
閉包（closure）是 Javascript 語言的一個難點，面試時常被問及，也是它的特色，很多高階應用都要依靠閉包實現。本文儘可能用簡單易懂的話，講清楚閉包的概念、形成條件及其常見的面試題。
我們先來看一個例子：
var n = 999;
function f1() {
console.log(n);
}
f1() // 999
複製程式碼
上面程式碼中，函式f1可以讀取全域性變數n。但是，函式外部無法讀取函式內部宣告的變數。
function f1() {
var n = 999;
}
console.log(n)
// Uncaught ReferenceError: n is not defined
複製程式碼
上面程式碼中，函式f1內部宣告的變數n，函式外是無法讀取的。
如果有時需要得到函式內的區域性變數。正常情況下，這是辦不到的，只有通過變通方法才能實現。那就是在函式的內部，再定義一個函式。
function f1() {
var n = 999;
function f2() {
console.log(n); // 999
}
}
複製程式碼
上面程式碼中，函式f2就在函式f1內部，這時f1內部的所有區域性變數，對f2都是可見的。既然f2可以讀取f1的區域性變數，那麼只要把f2作為返回值，我們不就可以在f1外部讀取它的內部變量了嗎！
二、閉包是什麼
我們可以對上面程式碼進行如下修改：
function f1(){
var a = 999;
function f2(){
console.log(a);
}
return f2; // f1返回了f2的引用
}
var result = f1(); // result就是f2函數了
result();// 執行result，全域性作用域下沒有a的定義，
//但是函式閉包，能夠把定義函式的時候的作用域一起記住，輸出999
複製程式碼
上面程式碼中，函式f1的返回值就是函式f2，由於f2可以讀取f1的內部變數，所以就可以在外部獲得f1的內部變量了。
閉包就是函式f2，即能夠讀取其他函式內部變數的函式。由於在JavaScript語言中，只有函式內部的子函式才能讀取內部變數，因此可以把閉包簡單理解成“定義在一個函式內部的函式”。 閉包最大的特點，就是它可以“記住”誕生的環境，比如f2記住了它誕生的環境f1，所以從f2可以得到f1的內部變數 。在本質上，閉包就是將函式內部和函式外部連線起來的一座橋樑。
那到底什麼是閉包呢？
當函式可以記住並訪問所在的詞法作用域，即使函式是在當前詞法作用域之外執行，這就產生了閉包。----《你不知道的Javascript上卷》
我個人理解， 閉包就是函式中的函式(其他語言不能函式再套函式) ,裡面的函式可以訪問外面函式的變數，外面的變數的是這個內部函式的一部分。
閉包形成的條件
- 函式巢狀
- 內部函式引用外部函式的區域性變數
三、閉包的特性
每個函式都是閉包，每個函式天生都能夠記憶自己定義時所處的作用域環境。把一個函式從它定義的那個作用域，挪走，執行。這個函式居然能夠記憶住定義時的那個作用域。 不管函式走到哪裡，定義時的作用域就帶到了哪裡 。接下來我們用兩個例子來說明這個問題：
//例題1
var inner;
function outer(){
var a=250;
inner=function(){
alert(a);//這個函式雖然在外面執行，但能夠記憶住定義時的那個作用域，a是250
}
}
outer();
var a=300;
inner();//一個函式在執行的時候，找閉包裡面的變數，不會理會當前作用域。
複製程式碼
//例題2
function outer(x){
function inner(y){
console.log(x+y);
}
return inner;
}
var inn=outer(3);//數字3傳入outer函式後，inner函式中x便會記住這個值
inn(5);//當inner函式再傳入5的時候，只會對y賦值，所以最後彈出8
複製程式碼
四、閉包的記憶體洩漏
棧記憶體提供一個執行環境，即作用域，包括全域性作用域和私有作用域,那他們什麼時候釋放記憶體的？
- 全域性作用域----只有當頁面關閉的時候全域性作用域才會銷燬
- 私有的作用域----只有函式執行才會產生
一般情況下，函式執行會形成一個新的私有的作用域，當私有作用域中的程式碼執行完成後，我們當前作用域都會主動的進行釋放和銷燬。但當遇到函式執行返回了一個引用資料型別的值，並且在函式的外面被一個其他的東西給接收了，這種情況下一般形成的私有作用域都不會銷燬。
如下面這種情況：
function fn(){
var num=100;
return function(){
}
}
var f=fn();//fn執行形成的這個私有的作用域就不能再銷燬了
複製程式碼
也就是像上面這段程式碼，fn函式內部的私有作用域會被一直佔用的，發生了記憶體洩漏。 所謂記憶體洩漏指任何物件在您不再擁有或需要它之後仍然存在。閉包不能濫用，否則會導致記憶體洩露，影響網頁的效能。閉包使用完了後，要立即釋放資源，將引用變數指向null 。
接下來我們看下有關於記憶體洩漏的一道經典面試題：
function outer(){
var num=0;//內部變數
return function add(){//通過return返回add函式，就可以在outer函式外訪問了
num++;//內部函式有引用，作為add函式的一部分了
console.log(num);
};
}
var func1=outer();
func1();//實際上是呼叫add函式， 輸出1
func1();//輸出2 因為outer函式內部的私有作用域會一直被佔用
var func2=outer();
func2();// 輸出1每次重新引用函式的時候，閉包是全新的。
func2();// 輸出2
複製程式碼
五、閉包的作用
1.可以讀取函式內部的變數。
2. 可以使變數的值長期儲存在記憶體中，生命週期比較長 。因此不能濫用閉包，否則會造成網頁的效能問題
3.可以用來實現JS模組。
JS模組:具有特定功能的js檔案,將所有的資料和功能都封裝在一個函式內部(私有的),只向外暴露一個包信n個方法的物件或函式,模組的使用者,只需要通過模組暴露的物件呼叫方法來實現對應的功能。
具體請看下面的例子:
//index.html檔案 <script type="text/javascript" src="myModule.js"></script> <script type="text/javascript"> myModule2.doSomething() myModule2.doOtherthing() </script> 複製程式碼
//myModule.js檔案
(function () {
var msg = 'Beijing'//私有資料
//操作資料的函式
function doSomething() {
console.log('doSomething() '+msg.toUpperCase())
}
function doOtherthing () {
console.log('doOtherthing() '+msg.toLowerCase())
}
//向外暴露物件(給外部使用的兩個方法)
window.myModule2 = {
doSomething: doSomething,
doOtherthing: doOtherthing
}
})()
複製程式碼
六、閉包的運用
我們要實現這樣的一個需求: 點選某個按鈕, 提示"點選的是第n個按鈕",此處我們先不用事件代理:
.....
<button>測試1</button>
<button>測試2</button>
<button>測試3</button>
<script type="text/javascript">
var btns = document.getElementsByTagName('button')
//遍歷加監聽
var btns = document.getElementsByTagName('button')
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function () {
console.log('第' + (i + 1) + '個')
}
}
</script>
複製程式碼
萬萬沒想到，點選任意一個按鈕，後臺都是彈出“第四個”,這是因為i是全域性變數,執行到點選事件時，此時i的值為3。那該如何修改，最簡單的是用let宣告i
for (let i = 0; i < btns.length; i++) {
btns[i].onclick = function () {
console.log('第' + (i + 1) + '個')
}
}
複製程式碼
另外我們可以通過閉包的方式來修改:
for (var i = 0; i < btns.length; i++) {
(function (j) {
btns[j].onclick = function (i) {
console.log('第' + (i + 1) + '個')
}
})(i)
}
複製程式碼
如果覺得文章對你有些許幫助，歡迎在 ofollow,noindex">我的GitHub部落格 點贊和關注，感激不盡！
ps:文章於2018.11.16重新修改,希望對你們有所收穫！