精读《你不知道的JavaScript》上卷-I-第5章作用域闭包-老生常谈的闭包在现在还适用吗当函数可以记住并访问所在的

I-第5章作用域闭包

精读《你不知道的JavaScript》上卷-I-第5章作用域闭包

闭包

当函数可以记住并访问所在的词法作用域时，就产生了闭包，即使函数是在当前词法作用域之外执行。

经典示例：

function foo() {
    var a = 2;
    function bar() {
        console.log( a );
    }
    return bar;
}
var baz = foo();
baz(); // 2 —— 这就是闭包的效果。

bar() 在自己定义的词法作用域以外的地方执行。

在 foo() 执行后，通常会期待 foo() 的整个内部作用域都被销毁，因为引擎有垃圾回收器用来释放不再使用的内存空间。由于看上去 foo() 的内容不会再被使用，所以很自然地会考虑对其进行回收。

而闭包的“神奇”之处正是可以阻止这件事情的发生。由于 bar() 所声明的位置在foo内部，它拥有涵盖 foo() 内部作用域的闭包，使得该作用域能够一直存活，以供 bar() 在之后任何时间进行引用。

bar() 依然持有对该作用域的引用，而这个引用就叫作闭包。

循环经典案例：

for (var i=1; i<=5; i++) {
    setTimeout( function timer() {
        console.log( i ); // 以每秒一次的频率输出五次 6
    }, i*1000 );
}

根据作用域的工作原理，实际情况是尽管循环中的五个函数是在各个迭代中分别定义的，但是它们都被封闭在一个共享的全局作用域中，因此实际上只有一个 i。

改进，为每次迭代生成新的作用域

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

用let解决。let变量在循环过程中不止被声明一次，每次迭代都会声明。

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

模块

模块模式需要具备两个必要条件。

必须有外部的封闭函数，该函数必须至少被调用一次(每次调用都会创建一个新的模块实例)。
封闭函数必须返回至少一个内部函数，这样内部函数才能在私有作用域中形成闭包，并且可以访问或者修改私有的状态。

示例：

var foo = (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
    };
})();

foo.doSomething(); // cool
foo.doAnother(); // 1 ! 2 ! 3

var foo = (function CoolModule(id) {
    function change() {
        // modifying the public 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

通过在模块实例的内部保留对公共 API 对象的内部引用，可以从内部对模块实例进行修改，包括添加或删除方法和属性，以及修改它们的值。

现代的模块机制

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

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

    function get(name) {
        return modules[name];
    }

    return {
        define: define,
        get: get
    };
})();

核心代码是这行modules[name] = impl.apply( impl, deps ); 为了模块的定义引入了包装函数(可以传入任何依赖)，并且将返回值，也就是模块的 API，储存在一个根据名字来管理的模块列表中。

看看怎么使用

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" )
); // Let me introduce: hippo

foo.awesome(); // LET ME INTRODUCE: HIPPO

多花一点时间来研究这些示例代码并完全理解闭包的作用吧。最重要的是要理解模块管理器没有任何特殊的“魔力”。它们符合前面列出的模块模式的两个特点:为函数定义引入包装函数，并保证它的返回值和模块的 API 保持一致。换句话说，模块就是模块，即使在它们外层加上一个友好的包装工具也不会发生任何变化。

未来的模块机制

ES6 中为模块增加了一级语法支持。但通过模块系统进行加载时，ES6 会将文件当作独立的模块来处理。每个模块都可以导入其他模块或特定的 API 成员，同样也可以导出自己的 API 成员。

ES6 的模块没有“行内”格式，必须被定义在独立的文件中(一个文件一个模块)。

import 可以将一个模块中的一个或多个 API 导入到当前作用域中，并分别绑定在一个变量上(在我们的例子里是 hello)。 module 会将整个模块的 API 导入并绑定到一个变量上(在我们的例子里是 bar)。export 会将当前模块的一个标识符(变量、函数)导出为公共 API。这些操作可以在模块定义中根据需要使用任意多次。

bar.js

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

baz.js

import bar from "bar";
console.log(bar.hello( "rhino" )); // Let

精读《你不知道的JavaScript》上卷-I-第5章作用域闭包-老生常谈的闭包在现在还适用吗

I-第5章 作用域闭包

闭包

模块

现代的模块机制

未来的模块机制

I-第5章作用域闭包