資訊專欄INFORMATION COLUMN
摘要：因為沒有塊級作用域，只有函數作用域，所以閉包的使用與函數是緊密相關的。模擬私有變量這里返回兩個閉包函數和。閉包會在父函數外部，改變父函數內部變量的值。
簡介
Javascript 中一個最重要的特性就是閉包的使用。因為閉包的使用，當前作用域總可以訪問外部的作用域。因為Javascript 沒有塊級作用域，只有函數作用域，所以閉包的使用與函數是緊密相關的。
各種專業文獻上的"閉包"（closure）定義非常抽象，很難看懂。我的理解是，閉包就是能夠讀取其他函數內部變量的函數。
由于在Javascript語言中，只有函數內部的子函數才能讀取局部變量，因此可以把閉包簡單理解成"定義在一個函數內部的函數"。
閉包最大用處有兩個，一個是可以讀取函數內部的變量，另一個就是讓這些變量的值始終保持在內存中。
如下例子：
function f1(){
var n=999;
nAdd=function(){n+=1}
function f2(){
alert(n);
}
return f2;
}
var result=f1();
result(); // 999
nAdd();
result(); // 1000
在這段代碼中，result實際上就是閉包f2函數。它一共運行了兩次，第一次的值是999，第二次的值是1000。這證明了，函數f1中的局部變量n一直保存在內存中，并沒有在f1調用后被自動清除。
為什么會這樣呢？原因就在于f1是f2的父函數，而f2被賦給了一個全局變量，這導致f2始終在內存中，而f2的存在依賴于f1，因此f1也始終在內存中，不會在調用結束后，被垃圾回收機制（garbage collection）回收。
這段代碼中另一個值得注意的地方，就是"nAdd=function(){n+=1}"這一行，首先在nAdd前面沒有使用var關鍵字，因此nAdd是一個全局變量，而不是局部變量。其次，nAdd的值是一個匿名函數（anonymous function），而這個匿名函數本身也是一個閉包，所以nAdd相當于是一個setter，可以在函數外部對函數內部的局部變量進行操作。
模擬私有變量function Counter(start) {
var count = start;
return {
increment: function() {
count++;
},
get: function() {
return count;
}
}
}
var foo = Counter(4);
foo.increment();
foo.get(); // 5
這里 Counter 返回兩個閉包：函數 increment 和 get。這兩個函數一直保持著對 Counter 作用域的訪問，因此它們能一直訪問到定義在 Counter 作用域的變量 count。
私有變量的工作機制由于 Javascript 不可以對作用域賦值和引用，所以在上例中，是沒有辦法在外部直接訪問內部私有變量 count。唯一的方法就是通過定義閉包來訪問。
var foo = new Counter(4);
foo.hack = function() {
count = 1337;
};
上面的代碼不會改變 Counter 作用域內的 count 變量值，因為 hack 沒有在 Counter 內定義。上面這段代碼只會創建或者覆蓋全局變量 count。
循環內的閉包一個最容易犯的錯誤就是在循環內使用閉包。
for(var i = 0; i < 10; i++) {
setTimeout(function() {
console.log(i);
}, 1000);
}
上面這段代碼不會輸出0到9，而是連續輸出10次10。
上面的匿名會一直保持一個對變量 i 的引用。當調用 console.log 函數開始輸出時，這是循環已經結束，而變量 i 已經為10了。
為了避免上面的錯誤發生，我們需要在每次循環時為變量 i 值創建一個拷貝。
為了復制循環中變量的值，最好的方式是在外層加一個匿名的立刻執行函數。
for(var i = 0; i < 10; i++) {
(function(e) {
setTimeout(function() {
console.log(e);
}, 1000);
})(i);
}
這個外部的匿名函數接收循環變量 i 作為第一個參數，并將其值拷貝至它自身的參數 e。
外部的匿名函數將參數 e 再傳遞給 setTimeout，因此 setTimeout 有了指向參數 e 的引用。而且這個參數 e 的值不會因為外部的循環改變而改變。
還有另外一個方法可以實現同樣的效果，就是在 setTimeout 內的匿名函數中再返回一個匿名函數：
for(var i = 0; i < 10; i++) {
setTimeout((function(e) {
return function() {
console.log(e);
}
})(i), 1000)
}
此外，通過 bind 方法也可以實現。
for(var i = 0; i < 10; i++) {
setTimeout(console.log.bind(console, i), 1000);
}
閉包的注意點
1）由于閉包會使得函數中的變量都被保存在內存中，內存消耗很大，所以不能濫用閉包，否則會造成網頁的性能問題，在IE中可能導致內存泄露。解決方法是，在退出函數之前，將不使用的局部變量全部刪除。
2）閉包會在父函數外部，改變父函數內部變量的值。所以，如果你把父函數當作對象（object）使用，把閉包當作它的公用方法（Public Method），把內部變量當作它的私有屬性（private value），這時一定要小心，不要隨便改變父函數內部變量的值。
思考題如果你能理解下面兩段代碼的運行結果，應該就算理解閉包的運行機制了。
代碼片段一。
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
return function(){
return this.name;
};
}
};
alert(object.getNameFunc()());
代碼片段二。
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
var that = this;
return function(){
return that.name;
};
}
};
alert(object.getNameFunc()());
參考地址
Closures and References
阮一峰的網絡日志：學習Javascript閉包（Closure）
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85999.html
摘要：系列目錄復習資料資料整理個人整理重溫基礎篇重溫基礎對象介紹重溫基礎對象介紹重溫基礎介紹重溫基礎相等性判斷本章節復習的是中的關于閉包，這個小哥哥呀，看看。這里隨著閉包函數的結束，執行環境銷毀，變量回收。 本文是 重溫基礎 系列文章的第十九篇。今日感受：將混亂的事情找出之間的聯系，也是種能力。 系列目錄： 【復習資料】ES6/ES7/ES8/ES9資料整理(個人整理) 【重溫基礎】...
摘要：個人前端文章整理從最開始萌生寫文章的想法，到著手開始寫，再到現在已經一年的時間了，由于工作比較忙，更新緩慢，后面還是會繼更新，現將已經寫好的文章整理一個目錄，方便更多的小伙伴去學習。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 個人前端文章整理 從最開始萌生寫文章的想法，到著手...
摘要：內存泄露內存泄露概念在計算機科學中，內存泄漏指由于疏忽或錯誤造成程序未能釋放已經不再使用的內存。判斷內存泄漏，以字段為準。 本文是 重溫基礎 系列文章的第二十二篇。 今日感受：優化學習方法。 系列目錄： 【復習資料】ES6/ES7/ES8/ES9資料整理(個人整理) 【重溫基礎】1-14篇 【重溫基礎】15.JS對象介紹 【重溫基礎】16.JSON對象介紹 【重溫基礎】1...
摘要：寫文章不容易，點個贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于版本如果你覺得排版難看，請點擊下面鏈接或者拉到下面關注公眾號也可以吧原理依賴收集源碼版之引用數據類型上 寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于...
閱讀 2883·2021-09-22 15:20
閱讀 2958·2021-09-22 15:19
閱讀 3448·2021-09-22 15:15
閱讀 2382·2021-09-08 09:35
閱讀 2373·2019-08-30 15:44
閱讀 3004·2019-08-30 10:50
閱讀 3707·2019-08-29 16:25
閱讀 1586·2019-08-26 13:55
