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. thinkphp 3.0 核心函数U的一个致命bug

    最近在玩thinkphp,感觉内置函数 U 挺强大的! 传递多个参数时,出乱子了(window环境下,xampp) 例如 echo U('Blog/cate',array('cate_id'=> ...

  2. Navicat安装教程、建表教程

    1.安装教程: 转自:https://www.jianshu.com/p/5f693b4c9468 2.使用教程(建表操作): https://jingyan.baidu.com/article/e6 ...

  3. 【学习笔记】Python 3.6模拟输入并爬取百度前10页密切相关链接

    [学习笔记]Python 3.6模拟输入并爬取百度前10页密切相关链接 问题描述 通过模拟网页,实现百度搜索关键词,然后获得网页中链接的文本,与准备的文本进行比较,如果有相似之处则代表相关链接. me ...

  4. Gym - 101615 D Rainbow Roads dfs序

    题目传送门 题目大意: 给出一颗树,每条边都有一个颜色,对一个点来说,如果其他所有点到这个点的简单路径,相连的边颜色都不同,这个点即合法点,统计所有的合法点. 思路: 对于一个节点来说 1.如果这个节 ...

  5. POJ3041轰炸行星（匈牙利算法 最小覆盖点集）

    Asteroids Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 25232   Accepted: 13625 Descr ...

  6. LeeCode（5. Longest Palindromic Substring）

    Given a string s, find the longest palindromic substring in s. You may assume that the maximum lengt ...

  7. Spring Cloud 监控相关

    因为最近客户提出想监控Spring Cloud运行状况的需求,所以稍稍做了调研.目前了解的方法如下: Eureka Server启动后可以在根目录路径看到所有注册的Eureka Client状况 各个 ...

  8. JQuery 判断滚动条是否到底部

    BottomJumpPage: function () { var scrollTop = $(this).scrollTop(); var scrollHeight = $(document).he ...

  9. JavaScript Date学习实例：获取3分钟前的时间“hhmmss”格式

    上一篇博客分享了Date对象的理论知识,今天正好看到一段相关的代码,可以继续深化,通过实例加强复习Date 题目:获取3分钟前的时间,并且显示格式是hhmmss 以下是看到的代码 var time=n ...

  10. 换晶振导致stm32串口数据飞码的解决办法(补充)

    今天(2014.4.21)把stm32f107的程序下载到stm32f103的板子上,发现串口收不到数据,突然想起晶振频率没有修改,#define HSE_VALUE    ((uint32_t)13 ...