條件：JavaScript中閉包無處不在，你只須要能夠辨認並具有它。閉包是基於詞法作用域謄寫代碼時天然發生的結果。

一、實質問題

• 當函數能夠記着並接見地點的詞法作用域是，就發生了閉包。有的人會很獵奇，什麼是詞法作用域，接下來我給人人提高一下什麼是詞法作用域。

詞法作用域

簡樸的來講詞法作用域就是定義在詞法階段的作用域，換就話說，詞法作用域是由你在寫代碼時將變量和塊作用域寫在哪裡來決議的

function foo(a){
    var b = a*2;
    function bar(c){
        console.log(a,b,c);
    }
    bar (b*3);
}
foo(2);

在這個例子中包括了三個逐級嵌套的作用域

• 1、包括全部全局作用域，foo
• 2、包括着foo所建立的作用域，a , bar , b
• 3、包括着bar所穿件的作用域 ，c

關於詞法作用域我們就現講這麼多，接下來照樣回到我們的正文，作用域閉包

function foo(){
    var a=2;
    function bar(){//bar()的詞法作用域能夠接見foo()的內部作用域
        console.log(a);
    }
    return bar;//將bar()函數當作一個值範例舉行通報
}
var baz =foo();
baz(2);

foo()內部作用域依舊存在，沒有被接納。bar()依舊持有該作用域的援用。這個援用就叫閉包

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

function bar(fn){
    fn();
}
foo();
//把內部函數baz通報給bar，
// 當挪用這個內部函數，
// 他涵蓋的foo()內部作用域的閉包就能夠視察到了，由於它能夠接見a

var fn;
function foo(){
    var a =2;
    function baz(){
        console.log(a);
    };
    fn = baz;
}

function bar(){
    fn();
}
foo();
bar();

• 不管經由過程何種手腕將內部函數通報到地點的詞法作用域之外，他都邑持有對原始定義作用域的援用，不管在那邊實行這個函數都邑運用閉包。

二、提拔

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

在引擎內部，內置的東西函數setTimeout()持有對一個參數的援用，引擎會挪用這個函數，在這個例子中就是內部的timer函數，而詞法作用域就在這個過程當中堅持完全。這就是閉包。

三、輪迴和閉包

for(var i=0;i<=5;i++){
    setTimeout(function timer() {
        console.log(i);
    }, i*1000);
}
//人人猜猜結果會是啥？

一般情況下會分別輸出数字1~5，但實際會輸出五次6。

• 耽誤函數的回調會在輪迴完畢時才實行。能夠設想一下異步加載機制。因而settimeout每次要比及輪迴完畢后才顯現值，如許就得到了我們的結果，輸出了五次6。

代碼中有什麼缺點致使它的行動通語義所暗示的不一致呢？
我們須要更多的作用域，特別是在輪迴的過程當中每一個迭代都要一個閉包作用域，因而想到了馬上實行函數

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

如許子為何還不可呢？我們明顯具有了更過的詞法作用域。
每一個耽誤函數都邑講IIFE在每次迭代中建立的作用域關閉起來。

• 假如作用域是空的話，我們的IIE只是一個什麼都沒用的空作用域。

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

重返塊作用域

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

let誑騙此法作用域，每次在迭代都去建立一個新的作用域，然後實行完后被燒毀，如許每一個迭代都有本身的作用域就能夠到達我們的預期結果，輸出1~5。

四、模塊

function coolModule(){
    var something = 'cool';
    var another = [1,2,3];
    function doSomething(){
        console.log(something);
    }
    function doAnother(){
        console.log(another.join('!'));
    }
    return {
        doSomething: doSomething,
        doAnother: doAnother
    };
}

var foo = coolModule();

foo.doAnother();
foo.doSomething();

這個形式JavaScript中被稱為模塊，庇護私有屬性，只提供大眾要領。

• 模塊形式須要具有兩個必要條件：
• 1、必需有外部的關閉函數
• 2、關閉函數必需返回最少一個內部函數

當代的模塊機制

大多數模塊依靠加載器/管理器本質上都是將這類模塊定義封裝進一個友愛的API。

var MyModules = (function Manager(){
            var modules = {};
            function define(name,deps,impl){
                for(var i=0;i<deps.length;i++){
                    deps[i] = module[deps[i]];
                }
                modules[name] = impl.apply(impl,deps);
            }
            function get(name){
                return modules[name];
            };
            return{
                define: define,
                get: get
            };
})();

MyModules.define("bar",[],function(){
    function hello(who){
        return "Let me introduce:"+ who;
    }
    return {
        hello: hello
    };
});

MyModules.define("foo",["bar"],function(bar){
    var hungry = "hippo";
    function awesome(){
        console.log(bar.hello(hungry).toUpperCase());
    }
    return {
        awesome: awesome
    };
});

var bar = MyModules.get("bar");
var foo = MyModules.get("foo");

// console.log(bar.hello("hippo"));

foo.awesome();