JavaScript闭包的详细理解

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

1、第一种创建方式

  1.       function test(){
  2.         var x=10;
  3.         return function(){
  4.           return x;
  5.         }
  6.       }
  7.       var a=test();
  8.       alert(a); //弹出test函数私有变量x，结果：10

2、第二种创建方式

  1.       var y;
  2.       function test(){
  3.         var x=10;
  4.         y=3;
  5.         y=function(){
  6.           return x;
  7.         }
  8.       }
  9.  
  10.       test(); //当调用函数之后test（）会找到一块缓存 现在test（）里放的就是 变量x  和匿名函数y
  11.       alert(y());

3、第三种创建方式

  1.   function test(){
  2.     var x=2;
  3.     var y=function(){
  4.       return x;
  5.     }
  6.     x++;
  7.     return y;
  8.   }
  9.   var a=test();
  10.   alert(a());  //弹出三
  11.  
  12.   读到第三种创建方法，有的朋友说了，明明在y的函数体已经返回了x变量，输出的为什么是3不是2.
  13.   注意：朋友们，y匿名函数只是在当前函数块创建，但是并未执行。函数顺序执行X++后，return y；在此才执行，++过后必然是3而不是2.
  14.

实例：

　　a、闭包实现迭代器。

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>闭包实现迭代器</title>
  6.     <script type="text/javascript">
  7.     function test(array){
  8.          /*这里用的是index++ 当第一次调用的时候作用域于test的index定义为0
  9.          而在array[index++]这句话 是先把index的索引赋值给这个数组 然后在进行自加1
  10.          所以我们调用第一次的时候输出的index=0的王维璋 第二次输出index=1的孙家营...
    　　　　　 */
  11.       var index=0;
  12.       return function(){
  13.         return array[index++];
  14.       }
  15.     }
  16.     var a=test(['王维璋','孙家营','王帅']);
  17.     for(var i = 0; i<3; i++){
  18.        console.log(a());
  19.     }
  20.     //因为数组传递的参数只有三个 所以在此array里面只有三个数据 当遍历迭代到第四个数据的时候返回的是undefined
  21.     </script>
  22.   </head>
  23.   <body>
  24.  
  25.   </body>
  26. </html>

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

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>闭包实现迭代增加标记</title>
  6.     <style >
  7.       div{height:500px; background:#000; color:#fff;  text-align:center;}
  8.       p{color:#fff;background:#f00;height:30px;}
  9.     </style>
  10.   </head>
  11.  
  12.   <body>
  13.  
  14.     <input type="button" name="but" value="创建p在div里" id="but" onclick="a()">
  15.     <div id="box-div">
  16.        <p>我是p1</p>
  17.     </div>
  18.  
  19.     <script type="text/javascript">
  20.       function test(){
  21.         var div=document.getElementById("box-div");
  22.         return function(){
  23.          var p=document.createElement("p");
  24.           return div.appendChild(p);
  25.         }
  26.       }
  27.       var a=test();
  28.     </script>
  29.  
  30.   </body>
  31. </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. DokanLibrary 卸载

    如果不小心安装了旧版...请卸载 在 c 盘中搜索  doken 其中有一个文件叫dokan.sys  它在C:\Windows\System32\drivers 文件夹中...放心删掉之.. 太坑了 ...

  2. 2015苏州大学ACM-ICPC集训队选拔赛（1） 1007

    连通图 Time Limit : 3000/1000ms (Java/Other)   Memory Limit : 65535/32768K (Java/Other) Total Submissio ...

  3. echarts设置线条粗细

    series: [ { name:"buy", type:'line', data:[], itemStyle: { normal: { color: '#6cb041', lin ...

  4. jQuery 全屏滚动插件 fullPage.js 参数说明

    fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站,主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 CSS3 ...

  5. jinkens 'python' 不是内部或外部命令，也不是可运行的程序 或批处理文件。

    jinkens执行构建时报错 解决方法,就是指定路径.python的安装目录和被执行文件的的目录

  6. asp.net搭建项目架构

    项目的架构决定这个项目的好坏. 今天我说说传统三层架构的搭建 第一步 创建一个解决方案 例如 TaskSystem 接着这个解决方案下创建六个项目分别: TaskSystem.DAL TaskSyst ...

  7. 压测工具 ab jmeter

    apach ab|abs ab  -n -c xxx.html/js/css jmeter siege 用途:测试分布式锁是否有效, 测试java Lock是否使用正确,测试接口吞吐量

  8. python 安装 第三方包

    ########1 (python 虚拟环境(如pycharm 中的 project )是一个独立的环境,所以也要重新安装一次第三方包) 上官网搜索 包 https://pypi.org/projec ...

  9. plSql添加快捷键设置

    汉化版:工具-首选项-用户界面-编辑器-自动替换-定义文件 英文版:Tools->Perferences->Editor中Autoreplaces选择配置的shortcuts 常用快捷键设 ...

  10. python处理时间和日期

    时间和日期  (图中错误修正:dt_obj.strftime(format))     import time, datetime 1. datetime obj 1) datetime dateti ...