徹底弄懂JS中閉包

DevYK 發布于2019-08-20 15:10 / 1883人閱讀

閉包概念:

　　閉包就是有權訪問另一個函數作用域中變量的函數.
分析這句話:

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

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

        這個叫做立即執行的匿名函數表達式(不清楚這種寫法的, 可以先google下, 或者看我的多帶帶一篇專門介紹)
        
        i這個是時候就被當做參數傳遞了, 每次這個匿名函數執行時, i都會把自己的值復制一份給n
        return語句中的匿名函數引用著n, 此時已經和i無關了.
        
        每次匿名函數表達式執行時, 都會保存一個不同的n.
        return語句中的匿名函數每次也引用著不同的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)
            )
            ...


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

轉自http://www.cnblogs.com/tinkbe...

云服務器 GPU云服務器編程語言中的+閉包 js閉包 js閉包的理解 js面試閉包如何回答

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/82050.html

徹底弄懂函數防抖和函數節流

摘要：若時間差大于間隔時間，則立刻執行一次函數。不同點函數防抖，在一段連續操作結束后，處理回調，利用和實現。函數防抖關注一定時間連續觸發的事件只在最后執行一次，而函數節流側重于一段時間內只執行一次。原博客地址，歡迎star 函數防抖和節流函數防抖和函數節流：優化高頻率執行js代碼的一種手段，js中的一些事件如瀏覽器的resize、scroll，鼠標的mousemove、mouseover...

Mr_houzi 2019-08-26 13:33 評論0 收藏0
【js 閉包】

摘要：但，這還不是閉包。通過訪問外部變量，一個閉包可以維持這些變量。閉包經常用于創建含有隱藏數據的函數但并不總是這樣。有人說應該在文章結尾對閉包進行總結，可惜小弟才疏學淺，不能給出一個精辟的總結。越來越覺得國內沒有教書育人的氛圍，為了弄懂JS的閉包，我使出了我英語四級吃奶的勁去google上搜尋著有關閉包的解釋，當我看到stackoverflow上這一篇解答，我腦中就出現了一句話：就是這貨...

keelii 2019-08-20 15:16 評論0 收藏0
前端基礎

摘要：談起閉包，它可是兩個核心技術之一異步基于打造前端持續集成開發環境本文將以一個標準的項目為例，完全拋棄傳統的前端項目開發部署方式，基于容器技術打造一個精簡的前端持續集成的開發環境。這一次，徹底弄懂 JavaScript 執行機制本文的目的就是要保證你徹底弄懂javascript的執行機制，如果讀完本文還不懂，可以揍我。不論你是javascript新手還是老鳥，不論是面試求職，還是日...

graf 2019-08-21 18:38 評論0 收藏0
JavaScript深入淺出

摘要：理解的函數基礎要搞好深入淺出原型使用原型模型，雖然這經常被當作缺點提及，但是只要善于運用，其實基于原型的繼承模型比傳統的類繼承還要強大。中文指南基本操作指南二繼續熟悉的幾對方法，包括，，。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。怎樣使用 this 因為本人屬于偽前端，因此文中只看懂了 8 成左右，希望能夠給大家帶來幫助....（據說是阿里的前端妹子寫的） this 的值到底...

blair 2019-08-21 18:26 評論0 收藏0
JavasScript重難點知識

摘要：忍者級別的函數操作對于什么是匿名函數，這里就不做過多介紹了。我們需要知道的是，對于而言，匿名函數是一個很重要且具有邏輯性的特性。通常，匿名函數的使用情況是創建一個供以后使用的函數。 JS 中的遞歸遞歸, 遞歸基礎, 斐波那契數列, 使用遞歸方式深拷貝, 自定義事件添加這一次，徹底弄懂 JavaScript 執行機制本文的目的就是要保證你徹底弄懂javascript的執行機制，如果...

forsigner 2019-08-21 18:36 評論0 收藏0