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. [Groovy]Groovy with Ant Task

    平时经常会用Ant来写一写脚本,但最近跨入到Groovy的时代,试着做一些改变.Groovy里集成了AntBuilder能非常方便的调用到Ant的对象模型. 现考察如下 1. Groovy里定义的属性 ...

  2. java向数据库插入数据时的错误： Duplicate entry '' for key 'PRIMARY' 问题解决

    错误提示为:你插入的记录与数据表中原有记录的主键重复了(Duplicate).所以插入失败 mysql主键设置成auto_increment时,进行并发性能测试出现主键反复Duplicate entr ...

  3. Jenkins 第一次访问时提示Unlock Jenkins

    Jenkins启动后录入网址提示Unlock Jenkins,To ensure Jenkins is securely set up by the administrator Jenkins启动后, ...

  4. ubuntu ifconfig 不显示IP地址

    本文转载:https://blog.csdn.net/cmh477660693/article/details/52760236 ubuntu终端下命令ifconfig的问题解决 问题一. ifcon ...

  5. JavaSE---多线程---线程的生命周期

    1.线程的生命周期:新建.就绪.运行.阻塞.死亡 2.运行状态线程进入阻塞: 1.1 调用sleep方法主动放弃: 1.2 调用线程的suspend方法将线程挂起,不推荐使用: 1.3 线程调用一个阻 ...

  6. python fork函数

    import os print('---父进程id:%s----'%(os.getpid())) pid=os.fork()#只能在liunx环境下执行 print('---%s---' % (os. ...

  7. AndroidAPI

    1词典 百度翻译 http://api.fanyi.baidu.com/api/trans/product/index 百度翻译支持多种语言互相翻译,包含PHP, JS, Python, C, Jav ...

  8. maya2012安装失败如何卸载重装

    AUTODESK系列软件着实令人头疼,安装失败之后不能完全卸载!!!(比如maya,cad,3dsmax等).有时手动删除注册表重装之后还是会出现各种问题,每个版本的C++Runtime和.NET f ...

  9. WSGI学习系列Pecan

    Pecan Introduce Pecan是一个轻量级的基于Python的Web框架, Pecan的目标并不是要成为一个“full stack”的框架, 因此Pecan本身不支持类似Session和D ...

  10. stm32 窗口看门狗学习（二）

    窗口看门狗有一个提前唤醒中断,如果开启这个中断,那么当计数器的值达到0x40的时候就会产生这个中断. 上次的代码加一点就可以做这个实验了. void WWDG_Init(u8 tr,u8 wr,u32 ...