一、引子
閉包（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="https://www.cnblogs.com/xzsj/archive/2021/01/13/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')
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 () {
console.log('第' + (j + 1) + '個')
}
})(i)
}
作者：浪里行舟
鏈接：深入淺出Javascript閉包
來源：github
著作權歸作者所有，商業轉載請聯系作者獲得授權，非商業轉載請注明出處，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/248475.html
標籤：其他
下一篇：ichartjs插件的使用