javascript中的闭包是一个强大而灵活的武器,搞清闭包,作用域链的作用机理,能让我更好的将闭包运用在我们的项目中。
先看一个闭包在for循环中经典的应用:
function foo(){ for(var i = 0; i<10; i++){ (function(j){ setTimeout(function(){ console.log( "current i:" + j + "--" + new Date().getSeconds() + "s" ); }, j * 1000); })(i); } } foo();
上面的代码改自Pro JavaScript Techniques 中用js控制css达到动画效果的部分。动画的高度/透明度是根据索引i的值动态设置的,所以我们需要将这个索引i保存下来。这里就有一个问题,为什么我们写成下面的代码就不能得到正确的索引呢?
function foo(){ for(var i = 0; i<10; i++){ setTimeout(function(){ console.log("current i:"+i+"--"+new Date().getSeconds()+"s"); //其实这里也是一个闭包 },i*1000); } } foo();
上面的代码得到的i始终是10,而不是想要的1,2,3...
现在我们来逐步详细分析原因。
1. 进入foo的execution context阶段;
这时创建foo的Variable Object (VO)/Activation Object (AO)
VO(foo) = { i: undefined, };
2. foo代码执行阶段
将fooExecutionContext push进Execution Context Stack 中,
i随着循环被修改为相应的数值。
executionContextStack.push(fooExecutionContext); executionContextStack = [ <foo> functionContext, globalContext ]
由于在for循环执行的时候,setTimeout内部的匿名函数的execution context对于foo来说是不可见的,因为这时的匿名函数并没有执行, 不能访问、修改该匿名函数内部的变量,所以匿名函数中的i不会被修改为for循环的当前索引。 但是该匿名函数的Variable Object (VO)/Activation Object (AO)已经创建,并且保存了i的引用 。
for循环结束时i值为10, 正是由于匿名函数的VO/AO保存了i的引用,foo运行结束时,Garbage Collector不会销毁foo的VO/AO(上面保存着i=10),所以当setTimeout内的匿名函数运行时,i的值始终为10。
搞清楚了上面的问题后,现在我们用图来解释开始的例子
图 1
上面的图是foo在执行最后一次循环时的运行机理。
图 2
图2是setTimeout内部匿名函数执行时的机理,其中红颜色框起来部分随每个 setTimeout内部匿名函数的不同而不同。
通过上面两副图我们可以清楚的看到,增加的匿名自执行函数的作用就是将for循环的索引作为自己的局部变量保存起来,这样setTimeout里面的匿名函数就可以通过scope chain访问到正确的索引值了。
参考:
http://dmitrysoshnikov.com/ecmascript/javascript-the-core/
http://dmitrysoshnikov.com/ecmascript/chapter-1-execution-contexts/
http://dmitrysoshnikov.com/ecmascript/chapter-2-variable-object/
http://dmitrysoshnikov.com/ecmascript/chapter-4-scope-chain/