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. redis常用数据类型与命令

    注意:LPUSH 和LPOP按照栈进行操作,RPUSH和RPOP按照队列进行操作 zremrangebyscore key score开始  score结束//根据score删除 zremrangeb ...

  2. Linq 查询内建议不要使用运算语句！

    比如list有2个值,当你运行完上述代码后,你会发现,你的ls中的Num没有按你预期的那样从0开始,导致这个问题的原因是:在你查询完毕后,执行的Count()方法,会导致查询语句中Num=num++再 ...

  3. web安全之文件上传漏洞攻击与防范方法

    一. 文件上传漏洞与WebShell的关系 文件上传漏洞是指网络攻击者上传了一个可执行的文件到服务器并执行.这里上传的文件可以是木马,病毒,恶意脚本或者WebShell等.这种攻击方式是最为直接和有效 ...

  4. 设置Linux shell超时自动退出

    Linux shell,一般默认情况下是不会超时退出的,但是有的时候我们想要让它在多少分钟后没有操作自动退出终端(听起来有点像windows多少分钟后自动锁屏一样).我们可以通过设置来实现这一功能. ...

  5. sqoop数据校验

    sqoop数据校验 # check data oracle_cnt=$(sqoop eval \ -Dmapred.job.queue.name=${queue} \ --connect ${conn ...

  6. python练习六十八：字符串练习

    题目:一个商城在搞抽奖的活动,需要在搞活动的宣传单上印刷优惠卷的验证码,验证码规定20位,生成100个 先来个简单的,20位码中只取数字 import random def num_1(num): l ...

  7. java课后思考问题(一）

    1.一个Java类文件中真的只能有一个共有类吗? 一个Java类文件中只能有一个公有类 2.请使用Eclipse或javac检测一下以下代码,有错吗? 在Java中,可以将一个类定义在另一个类里面或者 ...

  8. java——sleep()和wait()

    1.所属类不同sleep()属于Thread而wait()属于Object 2.sleep()没有释放当前锁,wait()则释放了当前锁 3.sleep(0)的目的是使当前线程释放cpu,其他线程可以 ...

  9. shell中各种括号()、(())、[]、[[]]、{}的作用和区别

    查看原文 - CSDN

  10. mobiscroll 日期问题

    做的一个项目中用到了mobiscroll日期控件,设置距离当前日期往前推一个月的时间出现如下图问题 弹出窗默认的年份不对,后来查找原因是初始化属性配置有问题,应该将设置为dateFormat:'yy- ...