JavaScript闭包的详细理解

一、原理：闭包函数--指有权访问私有函数里面的变量和对象还有方法等；通俗的讲就是突破私有函数的作用域，让函数外面能够使用函数里面的变量及方法。

1、第一种创建方式

      function test(){

        var x=10;

        return function(){

          return x;

        }

      }

      var a=test();

      alert(a); //弹出test函数私有变量x，结果：10

2、第二种创建方式

      var y;

      function test(){

        var x=10;

        y=3;

        y=function(){

          return x;

        }

      }

      test(); //当调用函数之后test（）会找到一块缓存 现在test（）里放的就是 变量x  和匿名函数y

      alert(y());

3、第三种创建方式

  function test(){

    var x=2;

    var y=function(){

      return x;

    }

    x++;

    return y;

  }

  var a=test();

  alert(a());  //弹出三

  读到第三种创建方法，有的朋友说了，明明在y的函数体已经返回了x变量，输出的为什么是3不是2.

  注意：朋友们，y匿名函数只是在当前函数块创建，但是并未执行。函数顺序执行X++后，return y；在此才执行，++过后必然是3而不是2.

实例：

　　a、闭包实现迭代器。

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>闭包实现迭代器</title>

    <script type="text/javascript">

    function test(array){

         /*这里用的是index++ 当第一次调用的时候作用域于test的index定义为0

         而在array[index++]这句话 是先把index的索引赋值给这个数组 然后在进行自加1

         所以我们调用第一次的时候输出的index=0的王维璋 第二次输出index=1的孙家营...
　　　　　 */

      var index=0;

      return function(){

        return array[index++];

      }

    }

    var a=test(['王维璋','孙家营','王帅']);

    for(var i = 0; i<3; i++){

       console.log(a());

    }

    //因为数组传递的参数只有三个 所以在此array里面只有三个数据 当遍历迭代到第四个数据的时候返回的是undefined

    </script>

  </head>

  <body>

  </body>

</html>

　　b、闭包实现点击增加p标记

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>闭包实现迭代增加标记</title>

    <style >

      div{height:500px; background:#000; color:#fff;  text-align:center;}

      p{color:#fff;background:#f00;height:30px;}

    </style>

  </head>

  <body>

    <input type="button" name="but" value="创建p在div里" id="but" onclick="a()">

    <div id="box-div">

       <p>我是p1</p>

    </div>

    <script type="text/javascript">

      function test(){

        var div=document.getElementById("box-div");

        return function(){

         var p=document.createElement("p");

          return div.appendChild(p);

        }

      }

      var a=test();

    </script>

  </body>

</html>

初学者理解起来闭包不是很好读懂，有问题或者意见，欢迎下面评论，我会和大家一起分享所学，欢迎交流！！！

JavaScript 闭包的详细分享（三种创建方式）（附小实例）的更多相关文章

  1. 2019年6月14日 Web框架之Django_07 进阶操作（MTV与MVC、多对多表三种创建方式、前后端传输数据编码格式contentType、ajax、自定义分页器）

    摘要 MTV与MVC 多对多表三种创建方式 ajax ,前后端传输数据编码格式contentType 批量插入数据和自定义分页器 一.MVC与MTV MVC(Model View Controller ...

  2. Struts2之命名空间与Action的三种创建方式

    看到上面的标题,相信大家已经知道我们接下来要探讨的知识了,一共两点:1.package命名空间设置:2.三种Action的创建方式.下面我们开始本篇的内容: 首先我们聊一聊命名空间的知识,namesp ...

  3. Django多对多表的三种创建方式，MTV与MVC概念

    MTV与MVC MTV模型(django): M:模型层(models.py) T:templates V:views MVC模型: M:模型层(models.py) V:视图层(views.py) ...

  4. Django-多对多关系的三种创建方式-forms组件使用-cookie与session-08

    目录 表模型类多对多关系的三种创建方式 django forms 组件 登录功能手写推理过程 整段代码可以放过来 forms 组件使用 forms 后端定义规则并校验结果 forms 前端渲染标签组件 ...

  5. django----多对多三种创建方式 form组件

    目录 多对多三种创建方式 全自动 全手动 半自动 form组件 基本使用 form_obj 及 is_valid() 前端渲染方式 取消前端自动校验 正则校验 钩子函数(Hook方法) cleaned ...

  6. Django框架（十）--ORM多对多关联关系三种创建方式、form组件

    多对多的三种创建方式 1.全自动(就是平常我们创建表多对多关系的方式) class Book(models.Model): title = models.CharField(max_length=32 ...

  7. 多对多三种创建方式、forms组件、cookies与session

    多对多三种创建方式.forms组件.cookies与session 一.多对多三种创建方式 1.全自动 # 优势:不需要你手动创建第三张表 # 不足:由于第三张表不是你手动创建的,也就意味着第三张表字 ...

  8. 多对多的三种创建方式-forms相关组件-钩子函数-cookie与session

    多对多的三种创建方式 1.全自动(推荐使用的**) 优势:第三张可以任意的扩展字段 缺点:ORM查询不方便,如果后续字段增加更改时不便添加修改 manyToManyField创建的第三张表属于虚拟的, ...

  9. ORM中choices参数(重要)、MTV于MVC模型、多对多关系三种创建方式

    choices参数(重要) **使用方式

随机推荐

  1. linu samba服务

    关闭防火墙并且重启网络yum install samba  samba-client samba-commmon -ysystemctl start smb smbclient -L //172.25 ...

  2. 字符串 Instant 互转

    Instant inst = Instant.now(); System.out.println(inst);//2018-05-15T02:27:09.909Z String s1 = s.subs ...

  3. SQL Server 数据导入与导出

    1. BCP 命令 用法: bcp {dbtable | query} {in | out | queryout | format} 数据文件 [-m 最大错误数] [-f 格式化文件] [-e 错误 ...

  4. my30_表碎片整理

    确认表的类型与存储引擎,是否全部是innodb select TABLE_SCHEMA,TABLE_NAME,TABLE_TYPE,ENGINE,VERSION,ROW_FORMAT,TABLE_RO ...

  5. thinkPHP5.0使用form表单提交数据和删除文章，不用TP的提示页面，使用弹出提示信息

    form表单提交数据和删除文章时,TP的默认信息提示页面的看起来不是很好看,想要实现弹窗提示怎么做呢? 前端:可以使用前端的一个知识--iframe,iframe元素会创建包含另外一个文档的内联框架: ...

  6. ETL的两种架构（ETL架构和ELT架构）

     ETL ETL,是英文 Extract-Transform-Load 的缩写,用来描述将数据从来源端经过抽取(extract).转换(transform).加载(load)至目的端的过程.ETL一词 ...

  7. Xshell设置主机名高亮

    修改后的效果: 操作步骤: 情况①:如果是Ubuntu或者Debian,按照下面的流程,两步解决: 打开~/.bashrc. 修改参数force_color_prompt=yes去掉前面的注释#. 情 ...

  8. w3schools juerymobile

    http://www.w3schools.com/jquerymobile/jquerymobile_examples.asp <!DOCTYPE html> <html> & ...

  9. [转]js判断url是否有效

    本文转自:http://www.cnblogs.com/fumj/p/3490121.html 方法一:(仅适用于ie) function CheckStatus(url) { XMLHTTP = n ...

  10. Horizon

    python manage.py compress python manage.py collectstatic {% extends "horizon/common/_modal_form ...