第五章
闭包
闭包在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
小结
当函数可以记住并访问所在的词法作用域,即使函数是在当前词法作用域之外执行,这时就产生了闭包
模块的两个主要特征
- 为创建内部作用域而调用了一个包装函数
- 包装函数的返回值必须至少包括一个对内部函数的引用,这样就会创建涵盖整个包装函数内部作用域的闭包