图解javascript中的变量对象、闭包、作用域链机理

最新推荐文章于 2020-11-05 22:21:11 发布

原创最新推荐文章于 2020-11-05 22:21:11 发布 · 133 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#closure #scope chain

javascript 专栏收录该内容

14 篇文章

订阅专栏

本文深入解析JavaScript中的闭包概念，通过对比两种不同for循环中使用闭包的方式，详细阐述闭包如何工作及其在实际项目中的应用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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。

搞清楚了上面的问题后，现在我们用图来解释开始的例子

js 运行机理