你不知道的JS（上卷）——读书笔记5 作用域闭包

第五章

闭包

闭包在JS中无处不在，我们需要的是能够识别、理解并能灵活运用它

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

在上述代码中，是一个属于闭包的简单例子，但是并不能最好的代表闭包所表现出来的作用，借用书中的一句话：

这是闭包吗？技术上来讲，也许是。但根据前面的定义，确切地说并不是。我认为最准确地用来解释bar()对a的引用的方法是词法作用域的查找规则，而这些规则只是闭包的一部分。（但却是非常重要的一部分）

再看一个例子：

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

上述例子，调用了foo函数然后返回了bar函数并赋值到baz标识符中，然后调用了baz函数。baz并不在baz函数的词法作用域中，却能调用到bar函数，以及可以使用bar函数定义时的词法作用域（引用了变量a） 再次引用书中的话：

这个函数在定义时的词法作用域以外的地方被调用。闭包使得函数可以继续访问定义时的词法作用域

这就是闭包

闭包可以使得函数的词法作用域不会消失，再举一个例子：

function wait(message) { setTimeout(function timer(){ console.log(message); },1000); } wait('hello , 闭包！')

在执行了timer函数时，实际上，timer函数的词法作用域涵盖了wait函数以及全局作用域。所以依然可以打印出message标识符。timer函数作为setTimeout函数中的某个回调函数，例如：

function setTimeout(fuc,time){ fuc(); //实际上是timer函数 }

在setTimeout的函数中，fuc函数实际上就完整拥有着timer函数的词法作用域。这就是闭包 再换句话说，只要使用了回调函数，就相当于是形成并且使用了闭包

下面再举个例子：

var a = 2; (function IIFE(){ console.log(a); })();

可能会有些人说这个形成了闭包，但是书的作者却不那么认为，因为在IIFE函数中，引入的a标识符他只是遵循着普通词法作用域的规则去查找a变量，而非闭包发现。IIFE的函数调用并不是在其词法作用域之外被调用，是在函数定义时的词法作用域中执行的函数

循环

在这又说明一下关于循环和闭包的问题，有这样如下代码

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

现在可以想想，代码的打印结果将会是什么？

很多人刚接触这段代码时可能会觉得每隔1s打印出1,2,3,4,5，但实际情况是，会每隔1s打印出1个6

6是变量i的最终值，可以思考一下为什么打印的都是i的最终值：6

实际上，setTimeout函数始终都是在for循环之后所执行，当for循环后，i的值就为6

尽管被迭代了5次，函数被调用了5次，但是实际上所有迭代的函数都公用着一个i

所以，当函数执行时，会根据词法作用域，查找i的值，显而易见会得到i的最终值：6

我们要使得每个迭代的函数都能调用迭代那一时刻的i值，就需要再创建个闭包作用域用于保存i值：

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

这样，当迭代的函数再次查找i时，会在当前词法作用域中（也就是在IIFE函数中）查找到i值（过程中也用到了闭包）

当然用let也可以很好地起到循环的效果：

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

模块

观察下面代码：

function module(){ let name = 'yy'; function getName(){ console.log(name); } return { getName:getName } } let foo = module(); module.getName(); //yy

通过引用对象的方式，我们可以通过对象的方法来获取完整的函数的词法作用域

模块模式需要具备两个条件：

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

简单的单例模式：

var module = (function foo(){ let name = 'yy'; function getName(){ console.log(name); } return { getName:getName } })(); let bar = module(); bar.getName(); //yy

现代的模块机智

//核心 var MyModules = (function Manager(){ var modules = {}; function define(){ 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 } })(); //定义 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

未来的模块机制

相比于基于函数的模块，ES6的模块是静态的（API不会在运行时改变）

相关的有：import、module、export

小结

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

模块的两个主要特征

为创建内部作用域而调用了一个包装函数包装函数的返回值必须至少包括一个对内部函数的引用，这样就会创建涵盖整个包装函数内部作用域的闭包