https://segmentfault.com/a/1190000000652891

闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。

闭包的特性

闭包有三个特性：

1.函数嵌套函数

2.函数内部可以引用外部的参数和变量

3.参数和变量不会被垃圾回收机制回收

闭包的定义及其优缺点

闭包 是指有权访问另一个函数作用域中的变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量

闭包的缺点就是常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。

闭包是javascript语言的一大特点，主要应用闭包场合主要是为了：设计私有的方法和变量。

一般函数执行完毕后，局部活动对象就被销毁，内存中仅仅保存全局作用域。但闭包的情况不同！

嵌套函数的闭包

   function aaa() {

          var a = 1;

          return function(){

           alert(a++)

          };

        }

        var fun = aaa();

        fun();// 1 执行后 a++，，然后a还在~

        fun();// 2

        fun = null;//a被回收！！

闭包会使变量始终保存在内存中，如果不当使用会增大内存消耗。

javascript的垃圾回收原理

（1）、在javascript中，如果一个对象不再被引用，那么这个对象就会被GC回收； 
（2）、如果两个对象互相引用，而不再被第3者所引用，那么这两个互相引用的对象也会被回收。

使用闭包的好处

那么使用闭包有什么好处呢？使用闭包的好处是：

1.希望一个变量长期驻扎在内存中

2.避免全局变量的污染

3.私有成员的存在

一、全局变量的累加

<script>

var a = 1;

function abc(){

        a++;

        alert(a);

}

abc();              //2

abc();            //3

</script>

二、局部变量

<script>

function abc(){

        var a = 1;

        a++;

        alert(a);

}

abc();                       //2

abc();                    //2

</script>

那么怎么才能做到变量a既是局部变量又可以累加呢？

三、局部变量的累加

<script>

function outer(){

        var x=10;

        return function(){             //函数嵌套函数

                x++;

                alert(x);

        }

}

var y = outer();              //外部函数赋给变量y;

y();                 //y函数调用一次，结果为11，相当于outer()()；

y();                //y函数调用第二次，结果为12，实现了累加

</script>

函数声明与函数表达式

在js中我们可以通过关键字function来声明一个函数：

<script>

function abc(){

        alert(123);

}

abc();

</script>

我们也可以通过一个"()"来将这个声明变成一个表达式：

<script>

(function (){

        alert(123);

})();                   //然后通过()直接调用前面的表达式即可，因此函数可以不必写名字；

</script>

四、模块化代码，减少全局变量的污染

<script>

var abc = (function(){      //abc为外部匿名函数的返回值

        var a = 1;

        return function(){

                a++;

                alert(a);

        }

})();

abc();    //2 ；调用一次abc函数，其实是调用里面内部函数的返回值

abc();    //3

</script>

五、私有成员的存在

<script>

var aaa = (function(){

        var a = 1;

        function bbb(){

                a++;

                alert(a);

        }

        function ccc(){

                a++;

                alert(a);

        }

        return {

                b:bbb,             //json结构

                c:ccc

        }

})();

aaa.b();     //2

aaa.c()      //3

</script>

六.使用匿名函数实现累加

//使用匿名函数实现局部变量驻留内存中，从而实现累加

<script type="text/javascript">

 function box(){

     var age = 100;

     return function(){          //匿名函数

          age++;

          return age;

     };

 }

var b = box();

alert(b());

alert(b());    //即alert(box()())；

alert(b());

alert(b);            //     function () {

                        //   age++;

                       // return age;

                      //       }

b = null；  //解除引用，等待垃圾回收

</script>

过度使用闭包会导致性能的下降。函数里放匿名函数，则产生了闭包

七、在循环中直接找到对应元素的索引

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

    <head>

            <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

            <title></title>

    <script>

    window.onload = function(){

            var aLi = document.getElementsByTagName('li');

            for (var i=0;i<aLi.length;i++){

                    aLi[i].onclick = function(){        //当点击时for循环已经结束

                    alert(i);

                    };

            }

    }

    </script>

    </head>

    <body>

            <ul>

                    <li>123</li>

                    <li>456</li>

                    <li>789</li>

                    <li>010</li>

            </ul>

    </body>

    </html>

八、使用闭包改写上面代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

    <head>

            <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

            <title></title>

    <script>

    window.onload = function(){

            var aLi = document.getElementsByTagName('li');

            for (var i=0;i<aLi.length;i++){

                    (function(i){

                            aLi[i].onclick = function(){

                                    alert(i);

                            };

                    })(i);

            }

            };

    </script>

    </head>

    <body>

            <ul>

                    <li>123</li>

                    <li>456</li>

                    <li>789</li>

            </ul>

    </body>

    </html>

九.内存泄露问题

由于IE的js对象和DOM对象使用不同的垃圾收集方法，因此闭包在IE中会导致内存泄露问题，也就是无法销毁驻留在内存中的元素

 
function closure(){

    var oDiv = document.getElementById('oDiv');//oDiv用完之后一直驻留在内存中

    oDiv.onclick = function () {

        alert('oDiv.innerHTML');//这里用oDiv导致内存泄露

    };

}

closure();

//最后应将oDiv解除引用来避免内存泄露

function closure(){

    var oDiv = document.getElementById('oDiv');

    var test = oDiv.innerHTML;

    oDiv.onclick = function () {

        alert(test);

    };

    oDiv = null;

}

10.新增

很多初学者学了闭包后，可能也不懂到底在哪里才有用到，甚至不懂闭包到底有啥用。其实你写的每一个js函数都是闭包，一个js函数的顶层作用域就是window对象，js的执行环境本身就是一个scope（浏览器的window/node的global），我们通常称之为全局作用域。每个函数，不论多深，都可以认为是全局scope的子作用域，可以理解为闭包。

扩展阅读：javascript学习总结（四）function函数部分

详解js闭包的更多相关文章

  1. [转]详解JS闭包

    闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 闭包的特性 闭包有三个特性: 1.函数嵌套函数 2.函数内部可以引用外部的参数和变量 3.参数 ...

  2. 详解JS闭包概念

    闭包理解 1.  如何产生闭包?    *当一个嵌套的内部(子)函数引用了嵌套的外部(父)函数的变量(函数)时,产生闭包 2.  闭包到底是什么?    * 使用Chrome调试查看    * 理解一 ...

  3. 详解js面向对象编程

    转自:http://segmentfault.com/a/1190000000713346 基本概念 ECMA关于对象的定义是:”无序属性的集合,其属性可以包含基本值.对象或者函数.“对象的每个属性或 ...

  4. 详解js变量、作用域及内存

    详解js变量.作用域及内存 来源:伯乐在线 作者:trigkit4       原文出处: trigkit4    基本类型值有:undefined,NUll,Boolean,Number和Strin ...

  5. [转]javascript console 函数详解 js开发调试的利器

    javascript console 函数详解 js开发调试的利器   分步阅读 Console 是用于显示 JS和 DOM 对象信息的单独窗口.并且向 JS 中注入1个 console 对象,使用该 ...

  6. 详解js和jquery里的this关键字

    详解js和jquery里的this关键字 js中的this 我们要记住:this永远指向函数运行时所在的对象!而不是函数被创建时所在的对象.this对象是在运行时基于函数的执行环境绑定的,在全局环境中 ...

  7. 详解js的bind、call、apply

    详解js的bind.call.apply 说明 虽然bind.call.apply都是js很基础的一块知识,但是我从未认真总结过这三者的区别. 由于公司后端是用的微服务架构,又没有中间层对接,导致前端 ...

  8. 详解js中的闭包

    前言 在js中,闭包是一个很重要又相当不容易完全理解的要点,网上关于讲解闭包的文章非常多,但是并不是非常容易读懂,在这里以<javascript高级程序设计>里面的理论为基础.用拆分的方式 ...

  9. Jquery 选择器 详解 js 判断字符串是否包含另外一个字符串

    Jquery 选择器 详解   在线文档地址:http://tool.oschina.net/apidocs/apidoc?api=jquery 各种在线工具地址:http://www.ostools ...

随机推荐

  1. Aircrack-ng无线破解总结

    过年回来家,奈何没网,实属无奈,只好看破解教程,看能否破出来.于是总结如下 测试环境在linux平台下,我用的是ubuntu环境.ubuntu安装可以直接用sudo apt-get install a ...

  2. CF77E Martian Food（圆的反演or 笛卡尔定理+韦达定理）

    题面 传送门 这题有两种方法(然而两种我都想不到) 方法一 前置芝士 笛卡尔定理 我们定义一个圆的曲率为\(k=\pm {1\over r}\),其中\(r\)是圆的半径 若在平面上有两两相切,且六个 ...

  3. memcache面试题汇总

    1,memcached是原子的吗? 所有的被发送到memcached的单个命令是完全原子的.如果您针对同一份数据同时发送了一个set命令和一个get命令,它们不会影响对方.它们将被串行化.先后执行.即 ...

  4. django入门-静态文件-part6

    尊重作者的劳动,转载请注明作者及原文地址 http://www.cnblogs.com/txwsqk/p/6517553.html 完全翻译自官方文档 https://docs.djangoproje ...

  5. Centos搭建Groovy开发环境

    背景 临时接到需求,要帮兄弟团队跑一点线上的数据,据说很急.于是拿出了许久不用的Spring-Boot.可是,可是,死活启动有问题,心累了.其实一般写脚本就是在Boot用Groovy写好,然后放到线上 ...

  6. JavaScript变量那些事

    引言 JavaScript的变量本质是松散类型的,也就是说其变量就是用于保存特定值的一个名字,变量的值和数据类型可以在脚本执行的生命周期中发生变化.这是一个很有趣很强大的特性,但是也是一个极容易出错误 ...

  7. 论文分享NO.3（by_xiaojian）

    论文分享第三期-2019.03.29 Fully convolutional networks for semantic segmentation,CVPR 2015,FCN 一.全连接层与全局平均池 ...

  8. basic algorithm- 20190416-20190425

    binary search 14.https://www.lintcode.com/problem/first-position-of-target/description 74.https://ww ...

  9. 微信 oauth 登录 ，回调两次，一个坑，记录一下。

    在做微信某个功能的时候,大致需求是:静默授权,得到openId ,然后拿着openId调用接口,判断是否关注.如果是关注的,则发放礼券.每个我网站的会员只会发放一次礼券.如果第二次则会提示已领取过礼券 ...

  10. Mac 10.12通过Launchd创建自定义服务（基于MySQL 5.7.15的开机自启动）

    在上一篇文章http://www.cnblogs.com/EasonJim/p/6275863.html中安装MySQL时采用的时DMG包的安装步骤页面进行安装的,如果这样安装的MySQL是会开机自启 ...