1、闭包
当函数可以记住并访问所在的词法作用域时,就产生了闭包,即使函数是在当前词法作用域之外执行。
function foo()
{
var a = 2;
function bar()
{
console.log(a);
}
return bar;
}
bar baz = foo();
baz(); //2,这就是闭包
基于词法作用域的查找规则(RHS引用查询),函数bar()可以访问外部foo()作用域中的变量a。然后我们将bar()函数本身当作一个值类型进行传递。在foo()执行后,其返回值,实际上只是通过不同的标识符引用调用了内部函数bar()。
因为bar()是在自己定义的词法作用域以外的地方执行,bar()拥有涵盖foo()内部作用域的闭包。所以foo()执行后其内部作用域不会被销毁。
function wait(message)
{
setTimeout(function timer()
{
console.log(message);
}, 1000);
}
wait("hello, closure!");
将一个内部函数(timer)传递给setTimeout()。timer具有涵盖wait()作用域的闭包,因此还保有对变量message的引用。深入到引擎的内部原理中,内置的工具函数setTimeout()持有对一个参数的引用。引擎会调用这个函数(timer),而词法作用域在这个过程中保持完整——闭包。
2、循环和闭包
for (var i = 1; i <= 5; i++)
{
setTimeout(function timer()
{
console.log(i);
}, i * 1000);
}
我们期待这段代码行为是分别输出数字1~5,每秒一次,每次一个。但实际上,输出的是以每秒一次的频率输出五次6。我们试图假设循环中的每个迭代在运行时会给自己捕获一个i的副本。但根据作用域的工作原理,实际情况是尽管循环中的五个函数是在各个迭代中分别定义的,但是它们都被封闭在一个共享的全局作用域中,因此只有一个i。
用IIFE解决:
for (var i = 1; i <= 5; i++)
{
(function(j)
{
setTimeout(function timer()
{
console.log(i);
}, i * 1000);
})(i);
}
用块作用域解决:
使用IIFE在每次迭代时都创建一个新的作用域。也就说每次迭代需要一个块作用域。
for (let i = 1; i <= 5; i++)
{
setTimeout(function timer()
{
console.log(i);
}, i * 1000);
}
块作用域本质上是将一个块转换成一个可以被关闭的作用域。
3、模块
function CoolModule()
{
var something = "cool";
var another = [1, 2, 3];
function doSomething()
{
console.log(something);
}
function doAnother()
{
console.log(another.join("i"));
}
return
{
doSomething : doSomething,
doAnother : doAnother
};
}
var foo = CoolModule();
foo.doSomething(); //cool
foo.doAnother(); //1!2!3
首先,CoolModule()只是一个函数,必须要通过它来创建一个模块实例,其次,CoolModule()返回一个用对象字面量语法{key:value}来表示的对象。这个返回的对象中含有对内部函数而不是内部数据变量的引用。保持内部数据变量是隐藏私有的状态。可以将这个对象类型的返回值看作本质上是模块的公共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.apple(impl, deps);
}
function get(name){
return modules[name];
}
return{
define : define,
get : get
}
})();
这段代码的核心是modulus[name] = impl.apply(impl,deps)。为了模块的定义引入了包装函数,并且将返回值存储在一个根据名字来管理的模块列表中。
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
foo和bar模块都是通过一个返回公共API的函数来定义的。foo甚至接受bar的示例作为依赖参数,并能相应地使用它。