javascript 閉包

xiangzhihong 發(fā)布于2019-08-23 16:54 / 945人閱讀

摘要：現(xiàn)在可以畫(huà)一個(gè)基本的閉包出來(lái)了三種傳遞方法分開(kāi)看，你可以的。二循環(huán)中的閉包說(shuō)到循環(huán)閉包就要掏出大家耳熟能詳?shù)睦踝恿?。外部包裝函數(shù)返回值至少引用一個(gè)內(nèi)部函數(shù)創(chuàng)建包裝函數(shù)內(nèi)部作用域閉包。

閉包 一、閉包是什么？

將一個(gè) 詞法作用域 中的 內(nèi)部函數(shù) 作為一個(gè) 一級(jí)值類(lèi)型 到處傳遞，就形成了閉包。

怎么去理解呢？這里要敲黑板劃重點(diǎn)了，上面的概念性文字介紹了三個(gè)點(diǎn)：

詞法作用域（函數(shù)）

內(nèi)部函數(shù)

一級(jí)值類(lèi)型傳遞

1、先說(shuō)詞法作用域

形成一個(gè)作用域最常見(jiàn)的就是函數(shù)了，函數(shù)內(nèi)部會(huì)形成一個(gè)內(nèi)部作用域，然后還有 let 、const 以及像 try/catch 結(jié)構(gòu)中的 catch 分句形成的塊作用域。

let 就是為其聲明的變量隱式劫持了所在的塊作用域，這個(gè)在后面講 let 和閉包的時(shí)候會(huì)詳細(xì)說(shuō)明 let 和閉包結(jié)合的用法。

通過(guò)了解可以知道，這里的作用域其實(shí)就是函數(shù)的內(nèi)部作用域。

2、內(nèi)部函數(shù)

內(nèi)部函數(shù)不用介紹了吧，在詞法作用域中定義的函數(shù)，傳遞后具有涵蓋自身所在作用域的閉包。

3、一級(jí)值類(lèi)型傳遞

值類(lèi)型傳遞方式有很多種啊，函數(shù)里面的一級(jí)值傳遞無(wú)非就是：返回值（ return ）、賦值（賦值給外部變量 ）、參數(shù)傳遞（作為參數(shù)傳遞給外部函數(shù) ）。

現(xiàn)在可以畫(huà)一個(gè)基本的閉包出來(lái)了：

//三種傳遞方法①②③分開(kāi)看，你可以的。

var fn;                //定義全局變量，用于內(nèi)部賦值        ---②
function foo() {
    var a = 2;
    function bar() {
        console.log(a);
    };
    return bar;        //返回值        ---①
    fn = bar;        //賦值        ---②
    baz(bar);        //參數(shù)傳遞    ---③
};

//定義外部函數(shù)，用于使用內(nèi)部分配給全局變量的函數(shù)    ---②
function cat() {
    fn();
};

//定義外部函數(shù)，用于內(nèi)部參數(shù)傳遞        ---③
function baz(func) {
    func();
};

foo();        //2       ---①
cat();        //2        ---②
baz();        //2        ---③

再來(lái)一例：

function wait(message) {
    setTimeout(function timer(){
        console.log(message);
    },1000);
}
wait("Hi Baby");

解析一下，按照我們前面的思路可以貫穿下來(lái)：

首先 wait(..) 里面的作用域，作用域內(nèi)部的 timer(..)函數(shù)，再將內(nèi)部函數(shù) timer(..) 傳遞給內(nèi)置工具函數(shù) setTimeout(..)，setTimeout(...)有參數(shù)引用（也就是我們傳遞的 timer(...) ），然后調(diào)用它。

整個(gè)過(guò)程行云流水，然后詞法作用域在這個(gè)過(guò)程中保持完璧之身。OK！

二、循環(huán)中的閉包

說(shuō)到循環(huán)閉包就要掏出大家耳熟能詳?shù)睦踝恿恕?/p>

for(var i = 1; i <= 5; i++) {
    setTimeout(function timer() {
        console.log(i);
    },i*1000)
}

666！好！輸出了幾個(gè)6，老鐵有點(diǎn)懵逼，不知應(yīng)該扎心還是雙擊666。

為何？

你大爺還是你大爺，即使你在每次迭代都定義了函數(shù)，但是都在共享全局作用域中，i 還是這個(gè) i

那要怎么解決？

這時(shí)候在每個(gè)迭代的時(shí)候加上一個(gè)閉包作用域，并且你得把這個(gè) i 大爺放進(jìn)作用域中。

//放法可以是傳參①，可以是賦值②

for(var i = 1; i <= 5; i++) {
    //這里先搞一個(gè)閉包作用域，派出我們的 IIFE
    (function(j) {        // ---①
        setTimeout(function timer() {
            console.log(j);
        },j*1000)
    })(i);        // ---①

    (function() {    
        var j = i;        // ---②
        setTimeout(function timer() {
            console.log(j);
        },j*1000)
    })();    
}

上面這個(gè)是用了閉包作用域，每次迭代都生成一個(gè)新的作用域，來(lái)封閉內(nèi)部變量。

說(shuō)到這里，前面提到的 let 應(yīng)該還有人記得，let 干嘛用的，不就是劫持變量形成塊作用域嗎？放在這里不是恰到好處？來(lái)一發(fā)。

for(let i = 1; i <= 5; i++) {
    setTimeout(function timer() {
        console.log(i)
    },i*1000)
}

直接在定義 i 大爺?shù)牡胤骄?"綁架" 了他。

或者，你也可以麻煩一點(diǎn)，先讓他上迭代車(chē)，上車(chē)之后再 let 定義一個(gè)變量把 i 大爺賦給他，兩種都行，簡(jiǎn)單點(diǎn)好。

三、總結(jié)一下閉包應(yīng)用

定時(shí)器、事件監(jiān)聽(tīng)器、Ajax請(qǐng)求、跨窗口通信、Web Workers 或者其他的異步（或同步）任務(wù)中（balabala~~~~），只要使用了回調(diào)函數(shù)，就是在使用閉包。

還有一處重要的模塊。

模塊的兩個(gè)重要特征：

有外部包裝函數(shù)（創(chuàng)建內(nèi)部作用域）且需要被調(diào)用。

外部包裝函數(shù)返回值至少引用一個(gè)內(nèi)部函數(shù)（創(chuàng)建包裝函數(shù)內(nèi)部作用域閉包）。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/103488.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

xiangzhihong

男|高級(jí)講師

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

TA的文章

OAuth 2.1 帶來(lái)了哪些變化

閱讀 2797·2021-11-24 09:39
JDK,JRE,JVM三者間的關(guān)系，以及JDK、JRE的主要結(jié)構(gòu)

閱讀 2558·2021-11-23 09:51
PerfDog性能狗上手體驗(yàn)及總結(jié)分析

閱讀 1871·2021-11-17 09:33
HostXen雙十一充300送50元/充500送100元/充1000元全場(chǎng)9折,香港2G內(nèi)存VPS月

閱讀 1752·2021-10-22 09:54
搬瓦工VPS：高端線(xiàn)路，助力企業(yè)運(yùn)營(yíng)，10Gbps美國(guó) cn2 gia，1Gbps香港cn2 gia

閱讀 1884·2021-08-16 11:00
你可能不了解的動(dòng)畫(huà)神器之requestAnimationFrame及其兼容寫(xiě)法

閱讀 3436·2019-08-30 15:53
我的CSS Flex印象

閱讀 1743·2019-08-30 13:19
盒子模型的理解

閱讀 2915·2019-08-30 12:49

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

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

javascript 閉包

相關(guān)文章