JavaScript閉包

bluesky 發(fā)布于2019-08-22 15:05 / 3331人閱讀

摘要：朋友，這就是閉包的效果。那么函數(shù)就是一個閉包，它可以在作用域外被訪問。封閉函數(shù)必須返回至少一個內(nèi)部函數(shù)，這樣內(nèi)部函數(shù)才能在私有作用域中形成閉包，并且可以訪問或者修改私有的狀態(tài)。的模塊機(jī)制中為模塊增加了一級語法支持。

閉包 閉包是什么？

當(dāng)函數(shù)可以記住并訪問所在的詞法作用域時，就產(chǎn)生了閉包，即使函數(shù)是在當(dāng)前詞法作用域之外執(zhí)行，簡單上講，就是在一個函數(shù)中內(nèi)部的函數(shù)。

function foo() {
var a = 2;
function bar() {
console.log( a );
}
return bar;
}
var baz = foo();
baz(); // 2 —— 朋友，這就是閉包的效果。

那么bar函數(shù)就是一個閉包，它可以在作用域外被訪問。
各種閉包實(shí)例：

function foo() {
var a = 2;
function baz() {
console.log( a ); // 2
}
bar( baz );
}
function bar(fn) {
fn(); // 媽媽快看呀，這就是閉包！
}

function setupBot(name, selector) {
$( selector ).click( function activator() {
console.log( "Activating: " + name );
} );
}
setupBot( "Closure Bot 1", "#bot_1" );
setupBot( "Closure Bot 2", "#bot_2" );

function wait(message) {
setTimeout( function timer() {
console.log( message );
}, 1000 );
}
wait( "Hello, closure!" );

本質(zhì)上無論何時何地，如果將函數(shù)當(dāng)作第一級的值類型并到處傳遞，就會由閉包，在定時器、事件監(jiān)聽器、Ajax請求、跨窗口通信、Web Workers或者其他的異步（或者同步）任務(wù)中，只要使用了回調(diào)函數(shù)，實(shí)際上就是閉包

模塊

模塊實(shí)例：

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.doSomething(); // cool
foo.doAnother(); // 1 ! 2 ! 3

這種模式在JavaScript中就是模塊。
最常見的實(shí)現(xiàn)模塊模式的方法通常被稱為模塊暴露。
模塊模式所具備的兩個必要特點(diǎn)：

 必須有外部的封閉函數(shù)，該函數(shù)至少被調(diào)用一次（每次調(diào)用都會產(chǎn)生新的模塊實(shí)例）。
封閉函數(shù)必須返回至少一個內(nèi)部函數(shù)，這樣內(nèi)部函數(shù)才能在私有作用域中形成閉包，并且可以訪問或者修改私有的狀態(tài)。

模塊模式的另一個簡單但強(qiáng)大的用法是命名將要作為公共API返回的對象。

var foo = (function CoolModule(id) {
function change() {
// 修改公共 API
publicAPI.identify = identify2;
}
function identify1() {
console.log( id );
}
function identify2() {
console.log( id.toUpperCase() );
}
var publicAPI = {
change: change,
identify: identify1
};
return publicAPI;
})( "foo module" );
foo.identify(); // foo module
foo.change();
foo.identify(); // FOO MODULE

通過在模塊實(shí)例的內(nèi)部保留對公共API對象的內(nèi)部引用，可以從內(nèi)部對模塊實(shí)例進(jìn)行修改，包括添加或刪除方法和屬性，以及修改他們的值。
現(xiàn)代的簡單模塊機(jī)制：

var MyModules = (function Manager() {
            var modules = {}

            function define(name, argus, func) {
                for (var i = 0; i < argus.length; i++) {
                    argus[i] = modules[argus[i]]
                }

                modules[name] = func.apply(func,argus)
            }

            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.call(undefined, "hippo")
        ); // Let me introduce: hippo
        foo.awesome.call(undefined); // LET ME INTRODUCE: HIPPO

"foo"和"bar"模塊都是通過一個返回公共API的函數(shù)來定義的，“foo”甚至接受“bar”的實(shí)例作為依賴參數(shù)，并能相應(yīng)的使用它。
它們符合前面列出的模塊模式的兩個特點(diǎn)：調(diào)用包裝了函數(shù)定義的包裝函數(shù)，并且將返回值作為該模塊的API。

ES6的模塊機(jī)制
ES6中為模塊增加了一級語法支持。在通過模塊系統(tǒng)進(jìn)行加載時，ES6會將文件當(dāng)作獨(dú)立的模塊來處理。每個模塊都可以導(dǎo)入其他模塊或特定的API成員，同時也可以導(dǎo)出自身的API成員。
重構(gòu)之前的模塊得三個文件

bar.js

         function hello(who) {
             return "Let me introduce: " + who
         }
         export hello

foo.js

         import hello from "bar"
         var hungry = "hippo"
         function awesome() {
             console.log(hello(hungry).toUpperCase())
         }

         export awesome

baz.js

         module foo from "foo"
         module bar from "bar"
         console.log(bar.hello("hippo"))
         foo.awesome

import方法：將一個模塊中的一個或多個API導(dǎo)入到當(dāng)前作用域中，并綁定在一個變量上。
module方法：將整個模塊的API導(dǎo)入并綁定到一個變量上
export方法：將當(dāng)前模塊的一個標(biāo)識符導(dǎo)出為公共API
模塊文件中的內(nèi)容會被當(dāng)作包含在作用域閉包中一樣來處理。