Javascript闭包的一些研究

首页 > 代码库 > Javascript闭包的一些研究

2024-11-02 01:11:02 204人阅读

本文不谈闭包的概念，因为概念容易把人搞晕，本文希望通过几个鲜活的例子来探究闭包的性质，相信对理解闭包会有所帮助。

程序1

var f = (function() {     var n = 10;     return function() {          ++n;          console.log(n);     }})();f();

输出：

结论：

闭包函数可以访问外层函数中的变量。

程序2

var arr = [];(function() {     var n = 0;     for (var i=0; i<3; ++i) {          arr[i] = function() {                 ++n;                 console.log(n);               }     }})();for (var i=0; i<3; ++i) {     var f = arr[i];     f();}

输出：

结论：

一个函数内有多个闭包函数，那么这些闭包函数共享外层函数中的变量。可以看出，例子中3个闭包函数中的n是同一个变量，而不是该变量的3个副本。

程序3

var f0 = function() {  ++n;  console.log(n);}var f = (function() {     var n = 10;     return f0;})();f();

输出：

技术分享

错误指向“++n”这一行。

结论：

闭包函数的作用域不是在引用或运行它的时候确定的，看起来好像是在定义它的时候确定的。

说明：
虽然该程序与“程序1”看起来一样，但由于函数f0一个在内部定义一个在外部定义，尽管它们都是从函数内部返回，但在这个例子中f0却无法访问变量n。

程序4

var f = (function() {     var n = 10;     return new Function(‘++n;console.log(n);‘);})();f();

输出同“程序3”：

技术分享

结论：

该程序是对“程序3”的进一步印证和补充。由该程序可以得出的结论是：闭包函数的作用域是在编译它的时候确定的。

说明：
使用Function构造器可以创建一个function对象，函数体使用一个字符串指定，它可以像普通函数一样执行，并在首次执行时编译。因此，虽然在匿名函数内部定义了此function对象，但一直要到调用它的时候才会编译，即执行到“f()”时，而此时原函数的作用域已经不存在了。

再看一个例子：

程序5

var f = (function() {     var n = 10;     return eval(‘(function(){++n;console.log(n);})‘);})();f();

输出：

结论：无

说明：
这个例子是对上面两个程序的补充。这个例子之所以能够和“程序1”一样打印出11，是因为eval( )函数会立即对传递给它字符串进行解析（编译、执行），因此使用eval定义的函数和直接定义的效果是等价的。

（注意：eval( )中的“function(){...}”必须用括号扩起来，否则会报错）

程序6

var f = (function() {     var n = 10;     var s = ‘hello‘;     return function() {          ++n;          console.log(n);     }})();f();

运行时在“console.log(n);”这一行加个断点，查看作用域中的值，其中只有n没有s：

技术分享

结论：
外层函数中那些未在闭包函数中使用的变量，对闭包函数是不可见的。在这个例子中，闭包函数没有引用过变量s，因此其作用域中只有n。也就是说，对闭包函数来说，其可以访问的外层函数的变量实际上只是真正的外层函数变量的一个子集。

程序7

这个程序用来通过数据证明“程序6”的结论。程序稍微有点复杂，后面会先对其做简单说明。

var funArr = [];var LENGTH = 500;var ALPHABET = ‘abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789‘;function getStr( ) {     var s = ‘‘;     for (var i=0; i<LENGTH; ++i) {          s += ALPHABET[Math.floor(Math.random( ) * 62)];     }     return s;}function getArr( ) {     var a = new Array(LENGTH);     for (var i=0; i<LENGTH; ++i) {          a[i] = Math.random( );     }}var f = function( ) {     var n = 10;     var s = getStr( );     var a = getArr( );     funArr.push(function( ) {          console.log(n, s, a);  // --- 1          console.log(n);        //  --- 2     })}for (var i=0; i<2000; ++i) {     f( );}