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. python 根据 数据库创建java 文件

    #coding=utf-8 import pymysql import os import re # 包全路径 packagepath=r'E:\idea工程\dc-exam\dc-exam\src\ ...

  2. GIL 线程池 进程池 同步 异步 阻塞 非阻塞

    1.GIL 是一个全局解释器锁,是一种互斥锁 为什么需要GIL锁:因为一个python.exe进程中只有一份解释器,如果这个进程开启了多个线程都要执行代码 多线程之间要竞争解释器,一旦竞争就有可能出现 ...

  3. Spring和EhCache整合(针对使用了Shiro)

    https://blog.csdn.net/a243293719/article/details/78277895

  4. iOS WebDriverAgent 环境搭建

    WebDriverAgent简介 WebDriverAgent是Facebook 在去年的 SeleniumConf 大会上推出了一款新的iOS移动测试框架.当时的推文申明,还只支持模拟器,不过在今年 ...

  5. HIVE锁相关

    hive存在两种锁,共享锁Shared (S)和互斥锁Exclusive (X) 其中只触发s锁的操作可以并发的执行,只要有一个操作对表或者分区出发了x锁,则该表或者分区不能并发的执行作业. -- 加 ...

  6. 自定义classLoader思考

    jvm对于类实例的区分 基于完全限定名+classLoader 不同的classLoader可以加载同一class,生成不同实例, 但是这两个class实例生成的对象不能强转 spring boot ...

  7. java——设计一个支持push，pop，top、在恒定时间内检索最小元素的栈。

    普通方法: 需要另外一个栈 用来存放每一时刻的min值 巧妙版: 只需要一个stack,stack中存的是与min的差值 但由于min是两个整数之间的差值,有可能会出现差值超过整数边界值的情况,因此要 ...

  8. Unable to instantiate receiver xxx.receiver.NetworkReceiver异常

    Unable to instantiate xxxreceiver.NetworkReceiver: 这个异常是之前版本有NetworkReceiver(监听网络变化的),新的版本删除了Network ...

  9. python set_index与reset_index的妙用

  10. STM32F3 浮点运算使用

    在keil中使用浮点运算的步骤:在程序中包含#include <math.h>