Javascript闭包的一些研究

原文:Javascript闭包的一些研究

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

程序1

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

f();

输出:

11

结论:

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

程序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();
}

输出:

1
2
3

结论:

一个函数内有多个闭包函数,那么这些闭包函数共享外层函数中的变量。可以看出,例子中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();

输出:

11

结论:无

说明:
这个例子是对上面两个程序的补充。这个例子之所以能够和“程序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( );
}

程序分析:

本程序的重点是for循环和函数f。for循环中调用了函数f 2000次,每次调用都会创建一个数字和两个长度为500的字符串和数组,所以2000次函数调用所创建的局部变量的规模还是比较可观的,程序用这种方法以便于后面做分析时对结果进行比较。

f中的局部变量会被一个闭包函数所引用,以此观察未被引用的局部变量是否会被回收。

分别运行该程序两次,第一次使用语句1(引用了f中的所有局部变量),第二次使用语句2(只引用了数字变量n)。对运行所得到的结果1和结果2分别采集堆快照(Heap Snapshot):

可以看到所占内存差别巨大,从这里就可以初步得出“未被闭包函数引用的局部变量会被回收”的结论。

不过为了严谨性,需要做更细致地分析。首先是结果1和结果2的统计图:

可以看到,第二次运行后内存中的对象数量明显要比第一次的少很多(二者产生的中间对象数量是相同的),这进一步说明了第二次运行后大部分对象都被回收了。

最后我们将结果2与结果1进行细致的比较,结果如下:

结论:
函数中的局部变量如果没有被任何闭包函数所引用(这里不考虑被全局变量所引用的情况),则这些局部变量在函数运行完成后就可以被回收,否则,这些变量会作为其闭包函数的作用域的一部分被保留,直到所有闭包函数也执行完毕为止。

该结论同时也印证了“程序6”的结论:闭包函数对外层函数作用域的引用是外层函数真实作用域的一个子集。

另外从这个实验还能推测出一点,即外层函数执行结束后是会被回收掉的。因为既然函数内部变量已被回收,那函数本身也没有存在的意义了。

时间: 2024-08-28 04:31:01

Javascript闭包的一些研究的相关文章

JavaScript闭包的底层运行机制

我研究JavaScript闭包(closure)已经有一段时间了.我之前只是学会了如何使用它们,而没有透彻地了解它们具体是如何运作的.那么,究竟什么是闭包? Wikipedia给出的解释并没有太大的帮助.闭包是什么时候被创建的,什么时候被销毁的?具体的实现又是怎么样的? 1234567891011121314151617181920 "use strict"; var myClosure = (function outerFunction() { var hidden = 1; ret

JavaScript 闭包环境很奇特 - 相当于类与实例的关系?!

太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS.Android.Html5.Arduino.pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作. 又一个疑问贴! 不过我相信,问题并不是难在如何解决,最终就是个能解决与不能解决,这很容易! 但当你无法决断是否能否解决,与如何解决的时侯,这才是最

深入理解javascript闭包

闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量. Js代码 var n=999; function f1(){ alert(n); } f1(); // 999 另一方面,在函数外部自然无法读取函数内的局部变量. Js代码 function

JavaScript 闭包

1.词法作用域: 简单地说子集能访问父级的变量, 说人话就是变量拿来就用不用传入 2.函数局部变量: 在函数体中以var 声明变量的为局部变量 + 函数传入的参数, 直接写变量名声明的变量是全局变量 3.局部变量生存期: 局部变量在函数函数的执行期间可用,  一旦执行过后,局部变量将不再可用 4.延长局部变量生存期: 现在问题来了,我想要延长局部变量的生存期,怎么办.(因为调用函数不仅仅是为了return, 有时候还需要保存函数中的状态, 或者实现类等等) 5.使用全局变量不好吗: 不好.有时函

javascript—闭包

javascript 闭包就是在另一个作用域中保存了一份它从上一级函数或作用域取得的变量(键值对0), 而这些键值对是不会随上一级函数的执行完成而销毁. function a(){ var i=0; function b(){ alert(++i); } return b; } var c=a(); c(); 在执行完var c=a()后,变量c实际上是指向了函数b,b中用到了变量i, 再执行c()后就会弹出一个窗口显示i的值(第一次为1).这段代码其实就创建了一个闭包. 为什么?因为函数a外的

JavaScript 闭包究竟是什么

JavaScript 闭包究竟是什么 1.简单的例子 首先从一个经典错误谈起,页面上有若干个div, 我们想给它们绑定一个onclick方法,于是有了下面的代码 <div id="divTest"> <span>0</span> <span>1</span> <span>2</span> <span>3</span> </div> <div id="d

全面理解Javascript闭包和闭包的几种写法及用途

一.什么是闭包和闭包的几种写法和用法                                                       1.什么是闭包 闭包,官方对闭包的解释是:一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分.闭包的特点: 1. 作为一个函数变量的一个引用,当函数返回时,其处于激活状态. 2. 一个闭包就是当一个函数返回时,一个没有释放资源的栈区. 简单的说,Javascript允许使用内部函数---即函数定义和函数表

javascript闭包的简单理解

奖Javascript闭包前,先给大家讲个小故事 故事背景:刘备和曹操煮酒的时间段,故事可能有点小差异,刘备为曹操手下,关羽为间谍. 咳咳 曹操很想知道手下新来的刘备整天鼓捣啥: 曹操就问刘备,玄德你整天鼓捣啥: 刘备想,我靠这怎么能告诉你,劳资岂不是找死,打个马虎眼就过去了,曹操什么也没问出来: 刘备回到家里,跟关羽说,二弟,哼,曹操那个傻吊,哼! 关羽晚上也回到家里,跟老婆说,哼,大哥那个傻吊,哼!我这就去告诉丞相: 曹操也不能罢休,就去问关羽,关羽正要去告密,就一五一十  ¥%…@?%%:

javascript 闭包学习

闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量. Js代码 var n=999; function f1(){ alert(n); } f1(); // 999 另一方面,在函数外部自然无法读取函数内的局部变量. Js代码 function