闭包拾遗 

  之前写了篇《闭包初窥》,谈了一些我对闭包的浅显认识,在前文基础上,补充并且更新些对于闭包的认识。

  还是之前的那个经典的例子,来补充些经典的解释。

  1. function outerFn() {
  2. var a = 0;
  3. function innerFn() {
  4. console.log(a++);
  5. }
  6. return innerFn;
  7. }
  8.  
  9. var fn = outerFn();
  10. fn();
  11. fn();

  这里并没有在outerFn内部修改全局变量,而是从outerFn中返回了一个对innerFn的引用。通过调用outerFn能够获得这个引用,而且这个引用可以可以保存在变量中。 这种即使离开函数作用域的情况下仍然能够通过引用调用内部函数的事实,意味着只要存在调用内部函数的可能,JavaScript就需要保留被引用的函数。而且JavaScript运行时需要跟踪引用这个内部函数的所有变量,直到最后一个变量废弃,JavaScript的垃圾收集器才能释放相应的内存空间。

  让我们说的更透彻一些。所谓“闭包”,就是在构造函数体内定义另外的函数作为目标对象的方法函数,而这个对象的方法函数反过来引用外层函数体中的临时变量。这使得只要目标对象在生存期内始终能保持其方法,就能间接保持原构造函数体当时用到的临时变量值。尽管最开始的构造函数调用已经结束,临时变量的名称也都消失了,但在目标对象的方法内却始终能引用到该变量的值,而且该值只能通这种方法来访问。即使再次调用相同的构造函数,但只会生成新对象和方法,新的临时变量只是对应新的值,和上次那次调用的是各自独立的。

  还是前文的例子:

  1. <ul>
  2. <li>0</li>
  3. <li>1</li>
  4. <li>2</li>
  5. <li>3</li>
  6. <li>4</li>
  7. </ul>
  8. <script>
  9. var lis = document.getElementsByTagName('li');
  10. for(var i = 0; i < lis.length; i++) {
  11. ~function(num) {
  12. lis[i].onclick = function() {
  13. alert(num)
  14. };
  15. }(i)
  16. }
  17. </script>

  为什么不加立即执行函数,alert的都会是5呢?

  如果不加IIFE,当i的值为5的时候,判断条件不成立,for循环执行完毕,但是因为每个li的onclick方法这时候为内部函数,所以i被闭包引用,内存不能被销毁,i的值会一直保持5,直到程序改变它或者所有的onclick函数销毁(主动把函数赋为null或者页面卸载)时才会被回收。这样每次我们点击li的时候,onclick函数会查找i的值(作用域链是引用方式),一查等于5,然后就alert给我们了。加上IIFE后即是又创建了一层闭包,函数声明放在括号内就变成了表达式,后面再加上括号就是调用了,这时候把i当参数传入,函数立即执行,num保存每次i的值。

垃圾回收机制(GC)

  接下来说说垃圾回收机制(Garbage Collecation)。

  在上面的第一个例子中,变量始终保存在内存中,说到底与JavaScript的垃圾回收机制有关。JavaScript垃圾回收的机制很简单:找出不再使用的变量,然后释放掉其占用的内存,但是这个过程不是实时的,因为其开销比较大,所以垃圾回收器会按照固定的时间间隔周期性的执行。不再使用的变量也就是生命周期结束的变量,当然只可能是局部变量,全局变量的生命周期直至浏览器卸载页面才会结束。局部变量只在函数的执行过程中存在,而在这个过程中会为局部变量在栈或堆上分配相应的空间,以存储它们的值,然后在函数中使用这些变量,直至函数结束,而闭包中由于内部函数的原因,外部函数并不能算是结束。

  还是上代码说明吧:

  1. function fn1() {
  2. var obj = {name: 'hanzichi', age: 10};
  3. }
  4.  
  5. function fn2() {
  6. var obj = {name:'hanzichi', age: 10};
  7. return obj;
  8. }
  9.  
  10. var a = fn1();
  11. var b = fn2();

  我们来看代码是如何执行的。首先定义了两个function,分别叫做fn1和fn2,当fn1被调用时,进入fn1的环境,会开辟一块内存存放对象{name: 'hanzichi', age: 10},而当调用结束后,出了fn1的环境,那么该块内存会被js引擎中的垃圾回收器自动释放;在fn2被调用的过程中,返回的对象被全局变量b所指向,所以该块内存并不会被释放。

垃圾回收机制的种类

  函数中的局部变量的生命周期:局部变量只在函数执行的过程中存在。而在这个过程中,会为局部变量在栈(或堆)内存上分配相应的空间,以便存储它们的值。然后在函数中使用这些变量,直至函数执行结束。此时,局部变量就没有存在的必要了,因此可以释放它们的内存以供将来使用。在这种情况下,很容易判断变量是否还有存在的必要;但并非所有情况下都这么容易就能得出结论。垃圾回收器必须跟踪哪个变量有用,哪个变量没用,对于不再有用的变量打上标记,以备将来收回其占用的内存。用于标识无用变量的策略可能会因实现而异,但具体到浏览器中的实现,则通常有两个策略。

  • 标记清除

  js中最常用的垃圾回收方式就是标记清除。当变量进入环境时,例如,在函数中声明一个变量,就将这个变量标记为“进入环境”。从逻辑上讲,永远不能释放进入环境的变量所占用的内存,因为只要执行流进入相应的环境,就可能会用到它们。而当变量离开环境时,则将其标记为“离开环境”。

  垃圾回收器在运行的时候会给存储在内存中的所有变量都加上标记(当然,可以使用任何标记方式)。然后,它会去掉环境中的变量以及被环境中的变量引用的变量的标记(闭包)。而在此之后再被加上标记的变量将被视为准备删除的变量,原因是环境中的变量已经无法访问到这些变量了。最后,垃圾回收器完成内存清除工作,销毁那些带标记的值并回收它们所占用的内存空间。

  到2008年为止,IE、Firefox、Opera、Chrome、Safari的js实现使用的都是标记清除的垃圾回收策略或类似的策略,只不过垃圾收集的时间间隔互不相同。

  • 引用计数  

  引用计数的含义是跟踪记录每个值被引用的次数。当声明了一个变量并将一个引用类型值赋给该变量时,则这个值的引用次数就是1。如果同一个值又被赋给另一个变量,则该值的引用次数加1。相反,如果包含对这个值引用的变量又取得了另外一个值,则这个值的引用次数减1。当这个值的引用次数变成0时,则说明没有办法再访问这个值了,因而就可以将其占用的内存空间回收回来。这样,当垃圾回收器下次再运行时,它就会释放那些引用次数为0的值所占用的内存。

  Netscape Navigator3是最早使用引用计数策略的浏览器,但很快它就遇到一个严重的问题:循环引用。循环引用指的是对象A中包含一个指向对象B的指针,而对象B中也包含一个指向对象A的引用。

  1. function fn() {
  2. var a = {};
  3. var b = {};
  4. a.pro = b;
  5. b.pro = a;
  6. }
  7.  
  8. fn();

  以上代码a和b的引用次数都是2,fn()执行完毕后,两个对象都已经离开环境,在标记清除方式下是没有问题的,但是在引用计数策略下,因为a和b的引用次数不为0,所以不会被垃圾回收器回收内存,如果fn函数被大量调用,就会造成内存泄露

  我们知道,IE中有一部分对象并不是原生js对象。例如,其DOM和BOM中的对象就是使用C++以COM对象的形式实现的,而COM对象的垃圾回收机制采用的就是引用计数策略。因此,即使IE的js引擎采用标记清除策略来实现,但js访问的COM对象依然是基于引用计数策略的。换句话说,只要在IE中涉及COM对象,就会存在循环引用的问题。

  1. var element = document.getElementById("some_element");
  2. var myObject = new Object();
  3. myObject.e = element;
  4. element.o = myObject;

  这个例子在一个DOM元素(element)与一个原生js对象(myObject)之间创建了循环引用。其中,变量myObject有一个名为element的属性指向element对象;而变量element也有一个属性名为o回指myObject。由于存在这个循环引用,即使例子中的DOM从页面中移除,它也永远不会被回收。

  为了避免类似这样的循环引用问题,最好是在不使用它们的时候手工断开原生js对象与DOM元素之间的连接:

  1. myObject.element = null;
  2. element.o = null;

  将变量设置为null意味着切断变量与它此前引用的值之间的连接。当垃圾回收器下次运行时,就会删除这些值并回收它们占用的内存。

闭包拾遗 & 垃圾回收机制的更多相关文章

  1. 你不知道的JavaScript--Item28 垃圾回收机制与内存管理

    1.垃圾回收机制-GC Javascript具有自动垃圾回收机制(GC:Garbage Collecation),也就是说,执行环境会负责管理代码执行过程中使用的内存. 原理:垃圾收集器会定期(周期性 ...

  2. js--闭包与垃圾回收机制

    前言 闭包和垃圾回收机制常常作为前端学习开发中的难点,也经常在面试中遇到这样的问题,本文记录一下在学习工作中关于这方面的笔记. 正文 1.闭包 闭包(closure)是Javascript语言的一个难 ...

  3. 闭包内的微观世界和js垃圾回收机制

    一.什么是闭包? 官方”的解释是:闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分.相信很少有人能直接看懂这句话,因为他描述的太学术.其实这句话 ...

  4. 理解闭包的微观世界和JS垃圾回收机制

    function a() { ; function b() { alert(++i); } return b; } var c = a(); c(); 一.闭包的微观世界 如果要更加深入的了解闭包以及 ...

  5. JS闭包的简单理解。优缺点以及垃圾回收机制

    闭包是什么? ·了解闭包首先了解js的‘链式作用域’结构,对象可以一级一级的向上查找父对象的变量,所以父对象的变量对子对象可见,反之不成立:所以都可以访问全局变量 ·为了解决函数外部无法访问函数内局部 ...

  6. 160930、Javascript的垃圾回收机制与内存管理

    一.垃圾回收机制-GC Javascript具有自动垃圾回收机制(GC:Garbage Collecation),也就是说,执行环境会负责管理代码执行过程中使用的内存. 原理:垃圾收集器会定期(周期性 ...

  7. JavaScript 垃圾回收机制分析

    同C# .Java一样可以手工调用垃圾回收程序,但是由于其消耗大量资源,而且手工调用的不会比浏览器判断的准确,所以不推荐手工调用垃圾回收.   最近精力主要用在了Web 开发上,读了一下<Jav ...

  8. PHP服务器脚本 PHP内核探索:新垃圾回收机制说明

    在5.2及更早版本的PHP中,没有专门的垃圾回收器GC(Garbage Collection),引擎在判断一个变量空间是否能够被释放的时候是依据这个变量的zval的refcount的值,如果refco ...

  9. JavaScript 执行环境、作用域、内存管理及垃圾回收机制

    前言 JavaScript具有自动垃圾收集机制,也就是说,执行环境会负责管理代码执行过程中使用的内存. [原理]找出那些不再继续使用的变量,然后释放其占用的内存.为此,垃圾收集器会按照固定的时间间隔( ...

随机推荐

  1. Linux Shell 02 流程控制语句

    一.if语句格式:支持if/elif/else形式,支持嵌套 1. command执行成功(及退出状态为0)时,执行command2 2. 当判断条件为test命令时,判断结果为true时,执行com ...

  2. subline 快捷键

    subline 快捷键  安装 pretty css  html  后1,CTRl+ shift +H 格式化代码

  3. javascript 特效实现(2)——回到顶部效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 笔者的编辑语法:MarkDown

    由于博客园里的文章有很多排版不好,一大堆文字堆在一块会影响到阅读. MarkDowm:百科 Markdown 是一种轻量级标记语言,创始人为约翰·格鲁伯(John Gruber).它允许人们“使用易读 ...

  5. docker常用术语命令

    镜像(Image) vs Dockerfile 这组概念很少会让人产生疑惑,但是这两者的区别非常重要.Docker在镜像(image)中运行你的代码,而不是Dockerfile.Dockerfile是 ...

  6. Linux上Eclipse项目右键菜单没有Maven

    在Centos 7上安装了eclipse以后,着实很兴奋.eclipse luna版本自带maven.但是用mvn eclipse:eclipse创建的java工程,在右键菜单居然没有Maven按钮, ...

  7. uva 839 Not so Mobile-S.B.S.

    Before being an ubiquous communications gadget, a mobilewas just a structure made of strings and wir ...

  8. 解决Linux中java.net.UnknownHostException: oracledb.sys.iflashbuy.com问题

    Linux环境报java.net.UnknownHostException: oracledb.sys.iflashbuy.com,原因为Linux下无法解析oracledb.sys.iflashbu ...

  9. PYTHON FABRIC实现远程操作和部署

    转载至:http://wklken.me/posts/2013/03/25/python-tool-fabric.html fabric title是开发,但是同时要干开发测试还有运维的活 (o(╯□ ...

  10. javascript中的后退和刷新

    <input type=button value=刷新 onclick="window.location.reload()"><input type=button ...