理解和运用JavaScript的闭包机制

http://www.jb51.net/article/71031.htm

这篇文章主要介绍了理解和运用JavaScript的闭包机制,是JavaScript入门学习中的基础知识,需要的朋友可以参考下

伟大的爱因斯坦同志说过:“如果你无法向一个 6 岁小孩解释清楚某问题,那说明你自己都没整明白”。然而,当我向一个 27 岁的朋友解释什么是闭包时,却彻底失败了。

这原本是国外某哥们儿在 Stack Overflow 上对 JavaScript 闭包所提出的问题。不过既然此问题是在 Stack Overflow 提出的,当然也会有很多高手出来解答,其中有些回答确实是经典,如下面这个:

如果在一个外部函数中再定义一个内部函数,即函数嵌套函数,那么内部函数也可以访问外部函数中的变量:

?

1

2

3

4

5

6

7

8

9

10

11

functionfoo(x) {

vartmp = 3;

functionbar(y) {

alert(x + y + (++tmp));

}

bar(10);

}

foo(2);// alert 16

foo(2);// alert 16

foo(2);// alert 16

此段代码可以正确执行,并返回结果:16,因为 bar 能访问外部函数的变量 tmp, 同时也能访问外部函数 foo 的参数 x。但以上示例不是闭包!

要实现闭包的话,需要将内部函数作为外部函数的返回值返回,内部函数在返回前,会将所有已访问过的外部函数中的变量在内存中锁定,也就是说,这些变量将常驻 bar 的内存中,不会被垃圾回收器回收,如下:

?

1

2

3

4

5

6

7

8

9

10

functionfoo(x) {

vartmp = 3;

returnfunction(y) {

alert(x + y + (++tmp));

}

}

varbar = foo(2);// bar 现在是个闭包了

bar(10);// alert 16

bar(10);// alert 17

bar(10);// alert 18

上述代码中,第一次执行 bar 时,仍会返回结果:16,因为 bar 仍然可以访问 x 及 tmp,尽管它已经不直接存在于 foo 的作用域内。那么既然 tmp 被锁定在 bar 的闭包里,那么每次执行 bar 的时候,tmp 都会自增一次,所以第二次和第三次执行 bar 时,分别返回 17 和 18。

此示例中,x 仅仅是个纯粹的数值,当 foo 被调用时,数值 x 就会作为参数被拷贝至 foo 内。

但是 JavaScript 处理对象的时候,使用的总是引用,如果用一个对象作为参数来调用 foo,那么 foo 中传入的实际上是原始对象的引用,所以这个原始对象也相当于被闭包了,如下:

?

1

2

3

4

5

6

7

8

9

10

11

12

13

functionfoo(x) {

vartmp = 3;

returnfunction(y) {

alert(x + y + tmp++);

x.memb = x.memb ? x.memb + 1 : 1;

alert(x.memb);

}

}

varage =newNumber(2);

varbar = foo(age);// bar 现在是个闭包了

bar(10);// alert 15 1

bar(10);// alert 16 2

bar(10);// alert 17 3

和期望的一样,每次执行 bar(10) 时,不但 tmp 自增了,x.memb 也自增了,因为函数体内的 x 和函数体外的 age 引用的是同一个对象。

via http://stackoverflow.com/questions/111102/how-do-javascript-closures-work

补充:通过以上示例,应该能比较清楚的理解闭包了。如果觉得自己理解了,可以试着猜猜下面这段代码的执行结果:

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

functionfoo(x) {

vartmp = 3;

returnfunction(y) {

alert(x + y + tmp++);

x.memb = x.memb ? x.memb + 1 : 1;

alert(x.memb);

}

}

varage =newNumber(2);

varbar1 = foo(age);// bar1 现在是个闭包了

bar1(10);// alert 15 1

bar1(10);// alert 16 2

bar1(10);// alert 17 3

varbar2 = foo(age);// bar2 现在也是个闭包了

bar2(10);// alert ? ?

bar2(10);// alert ? ?

bar2(10);// alert ? ?

bar1(10);// alert ? ?

bar1(10);// alert ? ?

bar1(10);// alert ? ?

实际使用的时候,闭包可以创建出非常优雅的设计,允许对funarg上定义的多种计算方式进行定制。如下就是数组排序的例子,它接受一个排序条件函数作为参数:

?

1

2

3

[1, 2, 3].sort(function(a, b) {

...// 排序条件

});

同样的例子还有,数组的map方法是根据函数中定义的条件将原数组映射到一个新的数组中:

?

1

2

3

[1, 2, 3].map(function(element) {

returnelement * 2;

});// [2, 4, 6]

使用函数式参数,可以很方便的实现一个搜索方法,并且可以支持无限制的搜索条件:

?

1

2

3

someCollection.find(function(element) {

returnelement.someProperty =='searchCondition';

});

还有应用函数,比如常见的forEach方法,将函数应用到每个数组元素:

?

1

2

3

4

5

[1, 2, 3].forEach(function(element) {

if(element % 2 != 0) {

alert(element);

}

});// 1, 3

顺便提下,函数对象的 apply 和 call方法,在函数式编程中也可以用作应用函数。 这里,我们将它们看作是应用函数 —— 应用到参数中的函数(在apply中是参数列表,在call中是独立的参数):

?

1

2

3

(function() {

alert([].join.call(arguments,';'));// 1;2;3

}).apply(this, [1, 2, 3]);

闭包还有另外一个非常重要的应用 —— 延迟调用:

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

vara = 10;

setTimeout(function() {

alert(a);// 10, after one second

}, 1000);

还有回调函数:

//...

varx = 10;

// only for example

xmlHttpRequestObject.onreadystatechange =function() {

// 当数据就绪的时候,才会调用;

// 这里,不论是在哪个上下文中创建

// 此时变量“x”的值已经存在了

alert(x);// 10

};

//...

还可以创建封装的作用域来隐藏辅助对象:

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

varfoo = {};

// 初始化

(function(object) {

varx = 10;

object.getX =function_getX() {

returnx;

};

})(foo);

alert(foo.getX());// 获得闭包 "x" – 10