簡單理解JavaScript中的閉包

sihai 發(fā)布于2019-08-20 11:27 / 2631人閱讀

摘要：閉包在我理解是一種比較抽象的東西。所以我寫了一篇博文來方便自己理解閉包。那么現(xiàn)在我們可以解釋一下閉包的第一個(gè)定義在計(jì)算機(jī)科學(xué)中，閉包是引用了自由變量的函數(shù)。循環(huán)中創(chuàng)建閉包在我們使用的關(guān)鍵字之前，閉包的一個(gè)常見問題就出現(xiàn)在循環(huán)中創(chuàng)建閉包。

零. 前言

從我開始接觸前端時(shí)就聽說過閉包，但是一直不理解閉包究竟是什么。上網(wǎng)看了各種博客，大家對閉包的說法不一。閉包在我理解是一種比較抽象的東西。所以我寫了一篇博文來方便自己理解閉包。博主是第一次寫博文，如果在文章中有什么看不懂或者概念錯(cuò)誤的地方，請大家多多見諒和指出錯(cuò)誤。

一. 閉包的定義

再說閉包之前，首先讓我們先來理解一下自由變量和約束變量。

在程序設(shè)計(jì)語言中，變量可以分為自由變量與約束變量兩種。簡單來說，一個(gè)函數(shù)里局部變量和參數(shù)都被認(rèn)為是約束變量；而不是約束變量的則是自由變量。下面我們通過一個(gè)demo來解說。

var x = 10; // 相對于fn來說，x是一個(gè)自由變量
function fn(){
    var b = 20;
    console.log( x + b ); // 30 
}
fn();

在上述例子中，相對于函數(shù)實(shí)例fn而言，x是一個(gè)自由變量，因?yàn)閤并不是fn的局部變量和參數(shù)。而b是fn的局部參數(shù)，所以b是fn的約束變量。

那么現(xiàn)在我們可以解釋一下閉包的第一個(gè)定義：

在計(jì)算機(jī)科學(xué)中，閉包是引用了自由變量的函數(shù)。

其實(shí)閉包不一定要是函數(shù)實(shí)例，也可以是代碼塊，只要滿足可以保存變量在內(nèi)存，同時(shí)有一些方法對于這些變量進(jìn)行訪問就行了。

所以，我們可以引申出閉包的第二個(gè)定義：

閉包是由函數(shù)和與其相關(guān)的引用環(huán)境組合而成的實(shí)例，環(huán)境由閉包創(chuàng)建時(shí)在作用域中的任何局部變量和參數(shù)組成。

閉包在運(yùn)行時(shí)可以有多個(gè)實(shí)例，不同的引用環(huán)境和相同的函數(shù)組合可以產(chǎn)生不同的實(shí)例。

// 例子1
function Person(){
    var name,
        age;

    function init(name, age){
        name = name;
        age = age;
    }
    function show(){
        console.log("name: %s, age: %d", name, age);
    }

    return {
        init: init,
        show: show
    }
}

var eyesiM = Person.init("EyesiM", 22); // 閉包的實(shí)例1
var dcc = Person.init("Dcc", 20); // 閉包的實(shí)例2

eyesiM.show(); // name: EyesiM, age: 22
dcc.show(); // name: Dcc, age: 20

上面的變量eyesiM和變量dcc就是閉包的實(shí)例，其中變量eyesiM的環(huán)境中局部變量name和age的值為"EyesiM"和22；變量dcc的環(huán)境中的局部變量name和age的值為"Dcc"和20。

二. 閉包的應(yīng)用

閉包可以用來在一個(gè)函數(shù)與一組“私有”變量之間建立關(guān)聯(lián)關(guān)系。在給定函數(shù)被多次調(diào)用的過程中，這些私有變量能夠保存在內(nèi)存中。變量的作用域僅限于包含它們的函數(shù)，因此無法從除包含它們的函數(shù)之外進(jìn)行訪問。

1. 模塊模式

在Java等等一些語言里面會(huì)有private關(guān)鍵字來將方法和變量聲明為私有的，即它們只能被同一個(gè)類中的其它方法所調(diào)用。

JavaScript不提供原生的支持，但是可以使用閉包模擬私有變量和私有方法。私有變量可以限制對代碼的訪問；避免非核心的方法弄亂了代碼的公共接口部分。

// 例子2
var demo = (function(){
    // 模擬私有變量
    var count = 0;

    function show(){
        console.log("count: %d", count++);
    }

    return {
        show: show
    }
})();

demo.show(); // 0
demo.count; // 我們不能直接引用，所以這里會(huì)返回undefined

在我理解，模塊模式可以有兩種用途：

立即調(diào)用函數(shù)表達(dá)式（IIFE）：將我們自身的變量和方法封裝起來，可以避免全局污染。例子2就是一個(gè)IIFE的例子。

引入依賴：我們可以引入對某一個(gè)全局對象的依賴，對這一個(gè)全局進(jìn)行擴(kuò)充。下面我們可以通過一個(gè)例子來表示。

// MODULE 就是一個(gè)全局對象，如果不存在就初始化為`{}`，我們使用局部參數(shù)my指向這個(gè)對象，接著我們給這個(gè)全局對象添加屬性`method`，然后返回指向這個(gè)全局對象的引用。
var MODULE = (function (my) {
    my.method = {
        // add code
    }
    return my;
}(MODULE || {}));

2. 循環(huán)中創(chuàng)建閉包

在我們使用ES6的let關(guān)鍵字之前，閉包的一個(gè)常見問題就出現(xiàn)在循環(huán)中創(chuàng)建閉包。

// 例子3



    
    Document


    apple
    banana
    orange

function showColor(item) {
    console.log("id: %s, color: %s", item.id, item.color);
}

function addHTML() {
    var colors = [{
        id: "apple",
        color: "red"
    }, {
        id: "banana",
        color: "yellow"
    }, {
        id: "orange",
        color: "orange"
    }];

    for (var i = 0, length = colors.length; i < length; i++) {
        var item = colors[i];

        // error
        // 當(dāng)我們把鼠標(biāo)依次移過id為"apple", "banana", "orange"的div時(shí)，控制臺打印出的是
        // id: orange, color: orange
        // id: orange, color: orange
        // id: orange, color: orange
        // document.getElementById(item.id).onmouseover = function(){
        //    showColor(item);
        // }

        // success
        // 當(dāng)我們把鼠標(biāo)依次移過id為"apple", "banana", "orange"的div時(shí)，控制臺打印出的是
        // id: apple, color: red
        // id: banana, color: yellow
        // id: orange, color: orange
        document.getElementById(item.id).onmouseover = function(item) {
            return function() {
                showColor(item);
            };
        }(item);
    }
}
addHTML();

三. 閉包的注意點(diǎn)

閉包避免了環(huán)境中的變量被當(dāng)成垃圾回收，因此使用閉包會(huì)使得閉包中的變量都被保存在內(nèi)存中。

在一般的多頁面中，我們關(guān)閉或重定向了頁面之后，瀏覽器會(huì)自動(dòng)回收原頁面所占用的資源，但是如果我們所做的項(xiàng)目是SPA的話，就需要考慮到內(nèi)存的使用，所以一定要慎用閉包。

四. 參考資料

yangfch3的筆記-閉包

深入理解JavaScript 模塊模式

詳解javascript立即執(zhí)行函數(shù)表達(dá)式（IIFE）

云服務(wù)器 GPU云服務(wù)器 js閉包的理解編程語言中的+閉包 javascript閉包 javascript閉包詳解

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/80585.html

發(fā)表評論

登陸后可評論

0條評論

sihai

男|高級講師

我要關(guān)注我要私信

TA的文章

昂瑞威 HS6621 低功耗藍(lán)牙芯片燒錄調(diào)試

閱讀 3159·2021-10-14 09:42
前端核心工具：yarn、npm、cnpm三者如何優(yōu)雅的在一起使用？

閱讀 3564·2019-08-26 13:56
記一次解決谷歌瀏覽器Google Chrome Helper占用過高cpu問題

閱讀 3445·2019-08-26 11:59
淺析 JS 事件循環(huán)之 Microtask 和 Macrotask

閱讀 938·2019-08-23 18:00
vant DatetimePicker 踩坑筆記

閱讀 2197·2019-08-23 17:51
使用iView的Dropdown實(shí)現(xiàn)一個(gè)右鍵菜單

閱讀 3522·2019-08-23 17:17
js的觀察者模式

閱讀 1479·2019-08-23 15:11
JointJS中文文檔

閱讀 5146·2019-08-23 15:05

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

簡單理解JavaScript中的閉包

相關(guān)文章

**通過示例學(xué)習(xí)JavaScript閉包**

JavaScript閉包的簡單理解

還擔(dān)心面試官問閉包？

**【進(jìn)階2-2期】JavaScript深入之從作用域鏈理解閉包**

JavaScript閉包初探

發(fā)表評論

0條評論

sihai

男|高級講師

TA的文章

昂瑞威 HS6621 低功耗藍(lán)牙芯片燒錄調(diào)試

前端核心工具：yarn、npm、cnpm三者如何優(yōu)雅的在一起使用？

記一次解決谷歌瀏覽器Google Chrome Helper占用過高cpu問題

淺析 JS 事件循環(huán)之 Microtask 和 Macrotask

vant DatetimePicker 踩坑筆記

使用iView的Dropdown實(shí)現(xiàn)一個(gè)右鍵菜單

js的觀察者模式

JointJS中文文檔

最新活動(dòng)