云天視角-淺談閉包

nanfeiyan 發布于2019-08-22 13:56 / 1749人閱讀

摘要：函數在執行的時候執行函數，將當前的變量對象由于當前的環境是函數，所以將其活動對象作為變量對象添加到作用域鏈的前端。此時，由于在執行，而作用域鏈也存在，所以可以在作用域鏈上進行查找，去訪問的變量。

一、現狀

閉包是jser繞不過的坎，一直在都在說，套用 simpson 的話來說：JavaScript中閉包無處不在，你只需要能夠識別并擁抱它。

閉包是基于詞法作用域書寫代碼時的自然結果，你甚至不需要為了利用它們而有意識的去創建閉包。閉包的創建和使用在你的代碼中隨處可見。你缺少的只是根據你的意愿來識別、擁抱和影響閉包的思維環境

二、什么是閉包(closure)

當函數可以記住并訪問所在的詞法作用域時，就產生了閉包。即使函數是在當前詞法作用域之外執行             --《你不知道的js》（上卷）

閉包是指有權訪問另一個函數作用域中的變量的函數 --《JavaScript高級程序設計》

先來看一個例子：
例子1：

function foo(){
    var a = 2;
    
    function bar(){
        console.log(a); // 2
    } 
    bar();
}

foo()

這是閉包嗎？
這個代碼從技術上來說是，但也可以說不是。準確的來說bar()對a的引用的方法是詞法作用域的查找規則。我們再來看：
例子2：

function foo(){
    var a = 2;
    
    function bar(){
        console.log(a)
    }
    
    return bar;
}
var baz = foo();
baz(); // 2, 這就是閉包了

在例2中，我們將bar()函數本身當做一個值類型進行傳遞，函數bar()能夠訪問foo()的內部作用域。在這個例子中，它在自己定義的詞法作用域以外的地方執行。

三、怎么形成的

要了解清楚，得先了解幾個概念

作用域鏈(scope chain)

詞法作用域

詞法作用域

每個函數都有自己的執行環境。這個環境可以訪問外部環境，以此類推。每個環境能訪問到的標識符集合，稱之為 作用域，也就是詞法作用域。

作用域鏈(scope chain)

將作用域一層一層的嵌套，就形成了作用域鏈

如下，通常我們都希望foo()在執行完成以后，整個的內部作用域都被銷毀。因為我們知道引擎有垃圾回收機制用來釋放不再使用的內存空間。由于看上去foo()的內容不會再被使用，所以很自然的想到會對其回收。但是，事實上內部作用域依然存在

var globalVar = 10;
function foo() {
    var fooVar = 20;
    function bar() {
        var barVar = 30;
        return globalVar + fooVar + barVar;
    }
    return bar;
}
var baz = foo();
baz();

如上，用一張圖表示

這個作用域鏈在函數創建的時候就保存起來了。

baz()函數在執行的時候(執行bar()函數)，將當前的變量對象（由于當前的環境是函數，所以將其活動對象作為變量對象）添加到作用域鏈的前端。此時，由于bar()在執行，而作用域鏈也存在，所以可以在作用域鏈上進行查找，去訪問foo()的變量。

四、閉包的應用場景有哪些

創建私有變量或函數

五、閉包的缺點

閉包中的值是存在于內存中，濫用的話會導致內存消耗過大

閉包經典問題

// 函數作用：希望它返回一個數組。該數組的元素為遍歷的索引值
function hello(){
    var res = [];
    for (var i = 0,len = 5;i < len;i++){
        res[i] = function () {
            return i;
        }
    }
    return res;
}

返回的結果跟我們期待的不一樣，因為：閉包保存的是整個變量對象，而不是每個變量。
解決方案：

function hello(){
    var res = [];
    for (var i = 0,len = 5;i < len;i++){
        res[i] = (function(i){
            return i;
        })(i)
    }
    return res;
}

這里，沒有沒有把閉包直接賦值給數組。而是定義了一個匿名函數，并且將立即執行該匿名函數的結果賦值給數組，由于參數是按值傳遞的，所以會將當前值傳給參數num。

參考資料：《你不知道的js》（中卷）、《JavaScript高級程序設計》

完

GPU云服務器云服務器設計淺談淺談javascript 淺談sdwan解決方案淺談正則表達式

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

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

2017文章總結

摘要：歡迎來我的個人站點性能優化其他優化瀏覽器關鍵渲染路徑開啟性能優化之旅高性能滾動及頁面渲染優化理論寫法對壓縮率的影響唯快不破應用的個優化步驟進階鵝廠大神用直出實現網頁瞬開緩存網頁性能管理詳解寫給后端程序員的緩存原理介紹年底補課緩存機制優化動歡迎來我的個人站點性能優化其他優化瀏覽器關鍵渲染路徑 - 開啟性能優化之旅高性能滾動 scroll 及頁面渲染優化理論 | HTML寫法...

dailybird 2019-08-01 18:28 評論0 收藏0
2017文章總結

摘要：歡迎來我的個人站點性能優化其他優化瀏覽器關鍵渲染路徑開啟性能優化之旅高性能滾動及頁面渲染優化理論寫法對壓縮率的影響唯快不破應用的個優化步驟進階鵝廠大神用直出實現網頁瞬開緩存網頁性能管理詳解寫給后端程序員的緩存原理介紹年底補課緩存機制優化動歡迎來我的個人站點性能優化其他優化瀏覽器關鍵渲染路徑 - 開啟性能優化之旅高性能滾動 scroll 及頁面渲染優化理論 | HTML寫法...

hellowoody 2019-08-22 14:02 評論0 收藏0
2017文章總結

摘要：歡迎來我的個人站點性能優化其他優化瀏覽器關鍵渲染路徑開啟性能優化之旅高性能滾動及頁面渲染優化理論寫法對壓縮率的影響唯快不破應用的個優化步驟進階鵝廠大神用直出實現網頁瞬開緩存網頁性能管理詳解寫給后端程序員的緩存原理介紹年底補課緩存機制優化動歡迎來我的個人站點性能優化其他優化瀏覽器關鍵渲染路徑 - 開啟性能優化之旅高性能滾動 scroll 及頁面渲染優化理論 | HTML寫法...

wwolf 2019-08-29 14:21 評論0 收藏0
淺談JavaScript中的閉包

摘要：在內部，理所當然能訪問到局部變量，但當作為的返回值賦給外的全局變量時，神奇的事情發生了在全局作用域中訪問到了，這就是閉包。而閉包最神奇的地方就是能在一個函數外訪問函數中的局部變量，把這些變量用閉包的形式放在函數中便能避免污染。一、閉包是什么？《JavaScript高級程序設計》中寫道：閉包是指有權訪問另一個函數作用域中的變量的函數，如果用下定義的觀點看，這句話就是說閉包是函數，我...

Riddler 2019-08-20 17:48 評論0 收藏0
淺談JavaScript閉包

摘要：但是函數返回了內部函數，內部函數會隨時訪問變量所以垃圾回收機制是不會回收函數的內部作用域的，這就是閉包的含義。也就是函數在定義的詞法作用域以外的地方被調用，閉包使得函數可以繼續訪問定義時的詞法作用域。　　初學JavaScript閉包時，閉包這個概念在我眼里及其的神秘，也不知道這個東西在講什么，尤其某些地方的閉包概念定義的非常抽象，屬于那種本來你可能明白這個概念，看了反而又把你給繞糊涂...

hsluoyz 2019-08-20 13:36 評論0 收藏0