徹底弄懂JS中閉包

DevYK 發(fā)布于2019-08-20 15:10 / 1882人閱讀

閉包概念:

　　閉包就是有權(quán)訪問另一個函數(shù)作用域中變量的函數(shù).
分析這句話:

　　1.閉包是定義在函數(shù)中的函數(shù).
　　2.閉包能訪問包含函數(shù)的變量.
　　3.即使包含函數(shù)執(zhí)行完了, 被閉包引用的變量也得不到釋放.

例子分析-1:
    
        function add(){
            var i = 0
                arr = [];
            for(; i < 10; i++){
                arr.push(function(){
                    alert(i);
                });
            }
            return arr;
        }
        var temp = add();
        temp[0]();
        
        大家猜猜這個結(jié)果是多少? 0, i, 10?
        我想大家會說是0.
        但是結(jié)果是10.
        
        我想大家想的應該是這樣滴:
         i = 0, arr.push(function(){
            alert(0);
         })
         i = 1, arr.push(function(){
            alert(1);
         })
        ...
         i = 10, arr.push(function(){
            alert(10);
         })
         
        咋一看, 這個確實合理, 根據(jù)閉包的定義, 具體這個當然是上面分析的那樣了.
        問題就出在這個變量的理解上.
        
        1.i是變量不假, 但是i在for循環(huán)的時候, 一直在不斷變化. 也就是說這個i在參與for循環(huán)的時候, 值是不確定的, 等到for執(zhí)行完后, i的值才確定.
        2.每次push一個匿名函數(shù)表達式時, 那只是定義一個函數(shù), 并沒去執(zhí)行那個函數(shù), 所以那個函數(shù)里引用的外部變量都是原封不動的放進去的.
          換句話說, 就是這個匿名函數(shù)在最后執(zhí)行的時候, 才會去查找作用域鏈, 直至找到那個變量i為止.
        
        也就是:
             i = 0, arr.push(function(){
                alert(i);
             })
             i = 1, arr.push(function(){
                alert(i);
             })
             ...
             i = 10, arr.push(function(){
                alert(i);
             })
        
        執(zhí)行add()時, i參與循環(huán)完畢, i = 10. 
        執(zhí)行temp[0]()時, 匿名函數(shù)會查找i, 先看自己, 我的i有值嗎?沒有. 再找他的上級函數(shù), i有值嗎?有, i = 10. 查找結(jié)束.
        至此, 不管執(zhí)行temp[0](), 還是temp[5](), 還是temp[10](), 結(jié)果都是10.
        
        改一下上面的例子, 讓它符合我們的預期要求.
        
        例子分析-2:
        
          function add(){
            var i = 0
                arr = [];
            for(; i < 10; i++){
                arr.push(
                (function(n){
                    return function(){
                        alert(n);
                    }
                })(i)//注意這個變化

                );
            }
            return arr;
        }
        var temp = add();
        temp[0]();
        temp[1]();
        ...
        
        這次結(jié)果是預期的,結(jié)果是 0 , 1 , 2,  3 ... 10
        
        分析一下循環(huán)那部分.
        (function(n){
            return function(){
                alert(n);
            }
        })(i)

        這個叫做立即執(zhí)行的匿名函數(shù)表達式(不清楚這種寫法的, 可以先google下, 或者看我的多帶帶一篇專門介紹)
        
        i這個是時候就被當做參數(shù)傳遞了, 每次這個匿名函數(shù)執(zhí)行時, i都會把自己的值復制一份給n
        return語句中的匿名函數(shù)引用著n, 此時已經(jīng)和i無關(guān)了.
        
        每次匿名函數(shù)表達式執(zhí)行時, 都會保存一個不同的n.
        return語句中的匿名函數(shù)每次也引用著不同的n。
        
        形象點就是這樣:
            arr.push(
                (function(n = i = 0){
                    return function(){
                        alert(n = 0);
                    }
                })(i = 0)
            )
            arr.push(
                (function(n = i = 1){
                    return function(){
                        alert(n = 1);
                    }
                })(i = 1)
            )
            ...


  閉包的介紹就到此為止了.

轉(zhuǎn)自http://www.cnblogs.com/tinkbe...