javascript 閉包

xiangzhihong 發布于2019-08-23 16:54 / 940人閱讀

摘要：現在可以畫一個基本的閉包出來了三種傳遞方法分開看，你可以的。二循環中的閉包說到循環閉包就要掏出大家耳熟能詳的栗子了。外部包裝函數返回值至少引用一個內部函數創建包裝函數內部作用域閉包。

閉包 一、閉包是什么？

將一個 詞法作用域 中的 內部函數 作為一個 一級值類型 到處傳遞，就形成了閉包。

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

詞法作用域（函數）

內部函數

一級值類型傳遞

1、先說詞法作用域

形成一個作用域最常見的就是函數了，函數內部會形成一個內部作用域，然后還有 let 、const 以及像 try/catch 結構中的 catch 分句形成的塊作用域。

let 就是為其聲明的變量隱式劫持了所在的塊作用域，這個在后面講 let 和閉包的時候會詳細說明 let 和閉包結合的用法。

通過了解可以知道，這里的作用域其實就是函數的內部作用域。

2、內部函數

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

3、一級值類型傳遞

值類型傳遞方式有很多種啊，函數里面的一級值傳遞無非就是：返回值（ return ）、賦值（賦值給外部變量 ）、參數傳遞（作為參數傳遞給外部函數 ）。

現在可以畫一個基本的閉包出來了：

//三種傳遞方法①②③分開看，你可以的。

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

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

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

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

再來一例：

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

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

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

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

二、循環中的閉包

說到循環閉包就要掏出大家耳熟能詳的栗子了。

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

666！好！輸出了幾個6，老鐵有點懵逼，不知應該扎心還是雙擊666。

為何？

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

那要怎么解決？

這時候在每個迭代的時候加上一個閉包作用域，并且你得把這個 i 大爺放進作用域中。

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

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

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

上面這個是用了閉包作用域，每次迭代都生成一個新的作用域，來封閉內部變量。

說到這里，前面提到的 let 應該還有人記得，let 干嘛用的，不就是劫持變量形成塊作用域嗎？放在這里不是恰到好處？來一發。

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

直接在定義 i 大爺的地方就 "綁架" 了他。

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

三、總結一下閉包應用

定時器、事件監聽器、Ajax請求、跨窗口通信、Web Workers 或者其他的異步（或同步）任務中（balabala~~~~），只要使用了回調函數，就是在使用閉包。

還有一處重要的模塊。

模塊的兩個重要特征：

有外部包裝函數（創建內部作用域）且需要被調用。

外部包裝函數返回值至少引用一個內部函數（創建包裝函數內部作用域閉包）。

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

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

Javascript閉包入門(譯文)

摘要：也許最好的理解是閉包總是在進入某個函數的時候被創建，而局部變量是被加入到這個閉包中。在函數內部的函數的內部聲明函數是可以的可以獲得不止一個層級的閉包。前言總括：這篇文章使用有效的javascript代碼向程序員們解釋了閉包，大牛和功能型程序員請自行忽略。譯者：文章寫在2006年，可直到翻譯的21小時之前作者還在完善這篇文章，在Stackoverflow的How do Java...

Fourierr 2019-08-20 13:56 評論0 收藏0
理解Javascript的閉包

摘要：但是閉包也不是什么復雜到不可理解的東西，簡而言之，閉包就是閉包就是函數的局部變量集合，只是這些局部變量在函數返回后會繼續存在。可惜的是，并沒有提供相關的成員和方法來訪問閉包中的局部變量。 (收藏自技術狂) 前言：還是一篇入門文章。Javascript中有幾個非常重要的語言特性——對象、原型繼承、閉包。其中閉包對于那些使用傳統靜態語言C/C++的程序員來說是一個新的語言特性。本文將...

dayday_up 2019-08-21 12:37 評論0 收藏0
JavaScript閉包，只學這篇就夠了

摘要：當在中調用匿名函數時，它們用的都是同一個閉包，而且在這個閉包中使用了和的當前值的值為因為循環已經結束，的值為。最好將閉包當作是一個函數的入口創建的，而局部變量是被添加進這個閉包的。閉包不是魔法這篇文章使用一些簡單的代碼例子來解釋JavaScript閉包的概念，即使新手也可以輕松參透閉包的含義。其實只要理解了核心概念，閉包并不是那么的難于理解。但是，網上充斥了太多學術性的文章，對于...

CoderBear 2019-08-21 11:56 評論0 收藏0
JavaScript深入之閉包

摘要：深入系列第八篇，介紹理論上的閉包和實踐上的閉包，以及從作用域鏈的角度解析經典的閉包題。定義對閉包的定義為閉包是指那些能夠訪問自由變量的函數。 JavaScript深入系列第八篇，介紹理論上的閉包和實踐上的閉包，以及從作用域鏈的角度解析經典的閉包題。定義 MDN 對閉包的定義為：閉包是指那些能夠訪問自由變量的函數。那什么是自由變量呢？自由變量是指在函數中使用的，但既不是函數參數也...

caige 2019-08-20 16:07 評論0 收藏0
還擔心面試官問閉包？

摘要：一言以蔽之，閉包，你就得掌握。當函數記住并訪問所在的詞法作用域，閉包就產生了。所以閉包才會得以實現。從技術上講，這就是閉包。執行后，他的內部作用域并不會消失，函數依然保持有作用域的閉包。網上總結閉包的文章已經爛大街了，不敢說筆者這篇文章多么多么xxx，只是個人理解總結。各位看官瞅瞅就好，大神還希望多多指正。此篇文章總結與《JavaScript忍者秘籍》《你不知道的JavaScri...

tinyq 2019-08-21 17:28 評論0 收藏0
[學習筆記] JavaScript 閉包

摘要：但是，必須強調，閉包是一個運行期概念。通過原型鏈可以實現繼承，而與閉包相關的就是作用域鏈。常理來說，一個函數執行完畢，其執行環境的作用域鏈會被銷毀。所以此時，的作用域鏈雖然銷毀了，但是其活動對象仍在內存中。學習Javascript閉包（Closure）javascript的閉包JavaScript 閉包深入理解(closure)理解 Javascript 的閉包JavaScript ...

sunsmell 2019-08-21 10:33 評論0 收藏0