JavaScript词法作用域与调用对象

关于 Javascript 的函数作用域、调用对象和闭包之间的关系很微妙，关于它们的文章已经有很多，但不知道为什么很多新手都难以理解。我就尝试用比较通俗的语言来表达我自己的理解吧。

作用域 Scope

Javascript 中的函数属于词法作用域，也就是说函数在它被定义时的作用域中运行而不是在被执行时的作用域内运行。这是犀牛书上的说法。但"定义时"和"执行（被调用）时"这两个东西有些人搞不清楚。简单来说，一个函数A在"定义时"就是 function A(){} 这个语句执行的时候就是定义这个函数的时候，而A被调用的时候是 A() 这个语句执行的时候。这两个概念一定要分清楚。

那词法作用域（以下称之为"作用域"，除非特别指明）到底是什么呢？它是个抽象的概念，说白了它就是一个"范围"，scope 在英文里就是范围的意思。一个函数的作用域是它被定义时它所处的"范围"，也就是它外层的"范围"，这个"范围"包含了外层的变量属性，这个"范围"被设置成这个函数的一个内部状态。一个全局函数被定义的时候，全局（这个函数的外层）的"范围"就被设置成这个全局函数的一个内部状态。一个嵌套函数被定义的时候，被嵌套函数（外层函数）的"范围"就被设置成这个嵌套函数的一个内部状态。这个"内部状态"实际上可以理解成作用域链，见下文。

照以上说法，一个函数的作用域是它被定义的时候所处的"范围"，那么 Javascript 里的函数作用域是在函数被定义的时候就确定了，所以它是静态的作用域，词法作用域又称为静态作用域。

调用对象 Call Object

一个函数的调用对象是动态的，它是在这个函数被调用时才被实例化的。我们已经知道，当一个函数被定义的时候，已经确定了它的作用域链。当 Javascript 解释器调用一个函数的时候，它会添加一个新的对象（调用对象）到这个作用域链的前面。这个调用对象的一个属性被初始化成一个名叫 arguments 的属性，它引用了这个函数的 Arguments 对象，Arguments 对象是函数的实际参数。所有用 var 语句声明的本地变量也被定义在这个调用对象里。这个时候，调用对象处在作用域链的头部，本地变量、函数形式参数和 Arguments 对象全部都在这个函数的范围里了。当然，这个时候本地变量、函数形式参数和 Arguments 对象就覆盖了作用域链里同名的属性。

作用域、作用域链和调用对象之间的关系

我的理解是，作用域是是抽象的，而调用对象是实例化的。

在函数被定义的时候，实际上也是它外层函数执行的时候，它确定的作用域链实际上是它外层函数的调用对象链；当函数被调用时，它的作用域链是根据定义的时候确定的作用域链（它外层函数的调用对象链）加上一个实例化的调用对象。所以函数的作用域链实际上是调用对象链。在一个函数被调用的时候，它的作用域链（或者称调用对象链）实际上是它在被定义的时候确定的作用域链的一个超集。

它们之间的关系可以表示成：作用域?作用域链?调用对象。

太绕口了，举例说明吧：

view source

 

print?

1	function f(x) {

2	var g = function () { return x; }

3

return g;

4

}

5	var g1 = f(1);

6	alert(g1());  //输出 1

假设我们把全局看成类似以下这样的一个大匿名函数：

1	(function() {

2

//这里是全局范围

3

})();

那么例子就可以看成是：

1	(function() {

2	function f(x) {

3	var g = function () { return x; }

4

return g;

5

}

6	var g1 = f(1);

7	alert(g1());  //输出 1

8

})();

1. 全局的大匿名函数被定义的时候，它没有外层，所以它的作用域链是空的。
2. 全局的大匿名函数直接被执行，全局的作用域链里只有一个 '全局调用对象'。
3. 函数 f 被定义，此时函数 f 的作用域链是它外层的作用域链，即 '全局调用对象'。
4. 函数 f(1) 被执行，它的作用域链是新的 f(1) 调用对象加上函数 f 被定义的时候的作用域链，即 'f(1) 调用对象->全局调用对象'。
5. 函数 g （它要被返回给 g1，就命名为 g1吧）在 f(1) 中被定义，它的作用域链是它外层的函数 f(1) 的作用域链，即 'f(1) 调用对象->全局调用对象'。
6. 函数 f(1) 返回函数 g 的定义给 g1。
7. 函数 g1 被执行，它的作用域链是新的 g(1) 调用对象加上外层 f(1) 的作用域链，即 'g1 调用对象->f(1)调用对象->全局调用对象'。

这样看就很清楚了吧。

闭包 Closuer

闭包的一个简单的说法是，当嵌套函数在被嵌套函数之外调用的时候，就形成了闭包。

之前的那个例子其实就是一个闭包。g1 是在 f(1) 内部定义的，却在 f(1) 返回后才被执行。可以看出，闭包的一个效果就是被嵌套函数 f 返回后，它内部的资源不会被释放。在外部调用 g 函数时，g 可以访问 f 的内部变量。根据这个特性，可以写出很多优雅的代码。

例如要在一个页面上作一个统一的计数器，如果用闭包的写法，可以这么写：

view source

 

print?

01	var counter  = (function() {

02	var i = 0;

03	var fns = {"get": function() {return i;},

04	"inc": function() {return ++i;}};

05	return fns;

06

})();

07	//do something

08	counter.inc();

09	//do something else

10	counter.inc();

11	var c_value = counter.get();  //now c_value is 2

这样，在内存中就维持了一个变量 i，整个程序中的其它地方都无法直接操作 i 的值，只能通过 counter 的两个操作。

在 setTimeout(fn, delay) 的时候，我们不能给 fn 这个函数句柄传参数，但可以通过闭包的方法把需要的参数绑定到 fn 内部。

1	for(var i=0,delay=1000; i< 5; i++, delay +=1000) {

2	setTimeout(function() {

3	console.log('i:' + i + " delay:" + delay);

4	}, delay);

5

}

这样，打印出来的值都是

1	i:5 delay:6000

2	i:5 delay:6000

3	i:5 delay:6000

4	i:5 delay:6000

5	i:5 delay:6000

改用闭包的方式可以很容易绑定要传进去的参数：

view source

 

print?

1	for(var i=0, delay=1000; i < 5; i++, delay += 1000) {

2	(function(a, _delay) {

3	setTimeout(function() {

4	console.log('i:'+a+" delay:"+_delay);

5	}, _delay);

6	})(i, delay);

7

}

输出：

view source

 

print?

1	i:0 delay:1000

2	i:1 delay:2000

3	i:2 delay:3000

4	i:3 delay:4000

5	i:4 delay:5000

闭包还有一个很常用的地方，就是在绑定事件的回调函数的时候。也是同样的道理，绑定的函数句柄不能做参数，但可以通过闭包的形式把参数绑定进去。