一、闭包(Closure)模糊概述

之前总觉得闭包(Closure)很抽象而且难理解，百度一下"闭包"名词，百度的解释是：“闭包是指可以包含自由（未绑定到特定对象）变量的代码块；这些变量不是在这个代码块内或者任何全局上下文中定义的，而是在定义代码块的环境中定义（局部变量）”

看了半天，也没有看懂闭包是什么？以下将是我对闭包(Closure)的理解，如有错误欢迎指出

    二、普通函数、变量访问作用域

以上普通函数的调用fn被调用了两次，变量b却没有累加？？

对于函数f1变量b在函数外部是不能访问的

如若实现局部变量b的累加，并且可以访问该怎么做呢？

    三、闭包(Closure)的清晰描述

(1)闭包(Closure)简单的可以理解成函数的嵌套，闭包就是能够读取其他函数内部变量的函数。

(2)变量长期驻留在内存中

、

以上可以看出，父函数f1中的变量b对于子函数f2是可访问的或者说是可见的，父函数f1调用一次，意味着变量b始终都是同一变量，f2中的b++,实现了对同一变量的自加,

对于子函数f2形成一个最简单的闭包(或者说函数f2维持着对外部作用域f1的引用,因此总可以访问f1作用域中的变量b)

    三、闭包在对象中应用

、

    四、解决获取标签索引问题

需求：当点击点击标签li时，获取标签li的内容及索引

　a.理想中的方案一<未使用闭包,未解决索引值问题>

效果：未解决获取到当前点击标签对应索引值，获取到的索引总是for循环完毕后的索引i

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>未使用闭包获取标签索引</title>

     <script type="text/javascript">

         window.onload=function(){

             var oLi=document.getElementsByTagName('li');

             for (var i = 0; i < oLi.length; i++) {

                 oLi[i].onclick=function(){//当点击li的时候，for循环已经执行完毕

                     alert(this.innerHTML+'index'+i);//总是i==5

                 }

             };

         }

     </script>

 </head>

 <body>

     <ul>

         <li>AAA</li>

         <li>BBB</li>

         <li>CCC</li>

         <li>DDD</li>

         <li>EEE</li>

     </ul>

 </body>

 </html>

b.解决方案二<使用闭包>代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>闭包解决获取标签索引问题</title>

     <script type="text/javascript">

         window.onload=function(){

                 var oLi=document.getElementsByTagName('li');

                 /*for (var i = 0; i < oLi.length; i++) {

                     oLi[i].onclick=(function(i){ //就已经存储到缓冲中

                        return function(){

                             alert(this.innerHTML+'index'+i);

                        }

                     })(i)

                 };*/

                 for (var i = 0; i < oLi.length; i++) {

                     (function(i){

                         oLi[i].onclick=function(){

                             alert(this.innerHTML+'index'+i);

                         }

                     })(i)

                 };

         }

     </script>

 </head>

 <body>

     <ul>

         <li>AAA</li>

         <li>BBB</li>

         <li>CCC</li>

         <li>DDD</li>

         <li>EEE</li>

     </ul>

 </body>

 </html>

    五、一道思考题（for循环与setTimeout）

上述打印结果打印了10次10,而不是0~9

原因 当 console.log 被调用的时候，匿名函数保持对外部变量 i 的引用，此时 for循环已经结束， i 的值被修改成了 10.

为了打印结果是0~9，需要在每次循环时创建变量i的拷贝修改代码如下

或修改成如下

作者：Avenstar

出处：http://www.cnblogs.com/zjf-1992/p/5380456.html

关于作者：专注于前端开发、喜欢阅读

本文版权归作者所有,转载请标明原文链接

资料参考

http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html

http://www.jb51.net/onlineread/JavaScript-Garden-CN/#function.closures

JavaScript闭包理解【关键字：普通函数、变量访问作用域、闭包、解决获取元素标签索引】的更多相关文章

  1. JavaScript闭包理解【关键字：普通函数、闭包、解决获取元素标签索引】

    以前总觉得闭包很抽象,很难理解,所以百度一下"闭包"概览,百度的解释是:“闭包是指可以包含自由(未绑定到特定对象)变量的代码块:这些变量不是在这个代码块内或者任何全局上下文中定义的 ...

  2. class 用法 函数变量的作用域

    函数变量的作用域 1. 函数体内声明的变量 2. 参数中的变量 没有赋值的 function fn(a){} 赋值的,值不是变量 function fn(a=45){} 赋的值为变量 function ...

  3. JavaScript 基础(五) 函数 变量和作用域

    函数定义和调用 定义函数,在JavaScript中,定义函数的方式如下: function abs(x){ if(x >=0){ return x; }else{ return -x; } } ...

  4. JavaScript 使用new关键字调用函数

    使用new关键字调用函数 test.js 代码如下 function Person(name, age, obj) { var o = new Object(); o.name = name; o.a ...

  5. 【追寻javascript高手之路02】变量、作用域知多少？

    前言 本来想把这个与上篇博客写到一起的,但是考虑到是两个知识点还是分开算了,于是我们继续今天的学习吧. 基本类型与引用类型 ECMAScript的的变量有两种类型: 基本类型(值类型):简单数据段 引 ...

  6. JavaScript学习笔记（八）——变量的作用域与解构赋值

    在学习廖雪峰前辈的JavaScript教程中,遇到了一些需要注意的点,因此作为学习笔记列出来,提醒自己注意! 如果大家有需要,欢迎访问前辈的博客https://www.liaoxuefeng.com/ ...

  7. JavaScript高级程序设计学习(三)之变量、作用域和内存问题

    这次讲的主要是变量,作用域和内存问题. 任何一门编程语言,都涉及这三个. 变量,比如全局变量,局部变量等,作用域,也分全局作用域和方法作用域,内存问题,在java中就涉及到一个垃圾回收的问题,由于ja ...

  8. 精读《javascript高级程序设计》笔记二——变量、作用域、内存以及引用类型

    变量.作用域和内存问题 执行环境共有两种类型——全局和局部 作用域链会加长,有两种情况:try-catch语句的catch块,with语句. javascript没有块级作用域,即在if,for循环中 ...

  9. JavaScript读书笔记（4）-变量、作用域和内存问题

    1.ECMAScript数据类型分为:基本类型值和引用类型值: ECMAScript中所有函数的参数都是按值传递的: 检查对象的类型:varible instanceof constructor Al ...

随机推荐

  1. 关于VS Code使用注意

    1]:初次使用vs code或多或少有些问题.比如不小心把最左边的这四个快捷按钮消失.,直接按 alt+v  选择[显示活动板]就行了 2]:修改界面语言   快捷键ctrl+shift+p   [修 ...

  2. Redis学习笔记（1）-安装Oracle VM VirtualBox

    Oracle VM VirtualBox官网网址 打开安装包网址界面,如下所示,点击截图红框. 下载完成后,点击exe文件,不停的点击下一步. 因为是使用MarkDown编辑器书写的尝试,所以写的简单 ...

  3. Try Catch 嵌套问题

    程序错误 问题描述: 在一个事物中,插入两张表数据,但是第一个成功,第二个失败了,没有起到所谓的事物的功能,这让我百思不得其解 问题所在: 本质上其实报错了,但是错误被吃掉了,具体来说,就是 try ...

  4. mybatis笔记01

    目录 1. Mybatis的介绍 2. 使用JDBC编码的分析 2.1 准备 2.3 程序代码 2.4 JDBC问题 3. Mybatis架构 4. Mybatis入门程序 4.1 mybatis下载 ...

  5. Java8 方法引用

    概述 方法引用是用来直接访问类或实例阴茎存在的方法或者构造方法.它需要由兼容的函数式接口(lambda表达式中用到的接口)构成的目标类型上下文. 有时候, 当我们想要实现一个函数式接口的方法, 但是已 ...

  6. 带你了解源码中的 ThreadLocal

    本篇文章已授权微信公众号 guolin_blog (郭霖)独家发布 这次想来讲讲 ThreadLocal 这个很神奇的东西,最开始接触到这个是看了主席的<开发艺术探索>,后来是在研究 Vi ...

  7. 2 >&1 的准确含义

    1. 2代表标准错误,2 > 表示重定向,就是把标准错误重定向到 1中,这个1如果想表示标准输出的话,就必须在前面加 & 2. 正常情况下,下面这个会有很多错误信息,但是加上2>& ...

  8. JMeter 报告监听器导入.jtl结果文件报错解决方案

    JMeter 报告监听器导入.jtl结果文件报错解决方案   by:授客 QQ:1033553122   1. 问题描述 把jmeter压测时生成的 .jtl结果文件导入监听器报告中,弹出如下错误提示 ...

  9. Python 标准类库-日期类型之datetime模块

    标准类库-日期类型之datetime模块    by:授客 QQ:1033553122 可用类型 3 实践出真知 4 timedelta对象 4 class datetime.timedelta(da ...

  10. 性能测试 查看Android APP 帧数FPS的方法

    (下述需要先安装eclipse,不然无法抓包) 1.保证手机与PC连接是正常的 2.打开手机“设置”→“开发者选项”(没有开发者选项就点击“关于手机”“版本号”连续点击就会出现开发者选项了).找到监控 ...