JavaScript闭包理解【关键字:普通函数、变量访问作用域、闭包、解决获取元素标签索引】

时间:2021-12-14 05:35:58

    一、闭包(Closure)模糊概述

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

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

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

JavaScript闭包理解【关键字:普通函数、变量访问作用域、闭包、解决获取元素标签索引】

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

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

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

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

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

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

JavaScript闭包理解【关键字:普通函数、变量访问作用域、闭包、解决获取元素标签索引】

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

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

    三、闭包在对象中应用

JavaScript闭包理解【关键字:普通函数、变量访问作用域、闭包、解决获取元素标签索引】

JavaScript闭包理解【关键字:普通函数、变量访问作用域、闭包、解决获取元素标签索引】

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

需求:当点击点击标签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)

JavaScript闭包理解【关键字:普通函数、变量访问作用域、闭包、解决获取元素标签索引】

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

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

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

JavaScript闭包理解【关键字:普通函数、变量访问作用域、闭包、解决获取元素标签索引】

或修改成如下

JavaScript闭包理解【关键字:普通函数、变量访问作用域、闭包、解决获取元素标签索引】

作者: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 基础&lpar;五&rpar; 函数 变量和作用域

    函数定义和调用 定义函数,在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高级程序设计学习&lpar;三&rpar;之变量、作用域和内存问题

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

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

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

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

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

随机推荐

  1. 为代码减负之&amp&semi;lt&semi;一&amp&semi;gt&semi;触发器(SQL)

    对触发器一词早有耳闻(最早是在耿大妈的数据库视频中),当初看完视频后,对理解不深刻的东西如:触发器,存储过程,事务,日志等等没有具体的去查阅,也没有具体的去尝试,应用.所以才导致了今天的博客(把曾经丢 ...

  2. oracle账户锁定解决方法

    今天进使用orcle中,发现系统中,system账户登录里提示账户被锁定 ,后来查了查资料,问题解决,方法如下: Microsoft Windows [版本 5.2.3790] (C) 版权所有 19 ...

  3. Java虚拟机运行时内存区域简析

    figure:first-child { margin-top: -20px; } #write ol, #write ul { position: relative; } img { max-wid ...

  4. html2canvas

    最近公司有个需求,实现html 页面元素转为png图像,这边用了html2canvas来实现.,这里记录一下,避免以后忘了~~ 官网链接: http://html2canvas.hertzen.com ...

  5. 每个大主播都是满屏弹幕,怎么做到的?Python实战无限刷弹幕!

    anmu 是一个开源的直播平台弹幕接口,使用他没什么基础的你也可以轻松的操作各平台弹幕.使用不到三十行代码,你就可以使用Python基于弹幕进一步开发.支持斗鱼.熊猫.战旗.全民.Bilibili多平 ...

  6. python模块&lowbar;hashlib详解

    hashlib 摘要算法简介 Python的hashlib提供了常见的摘要算法,如MD5,SHA1等等. 什么是摘要算法呢?摘要算法又称哈希算法.散列算法.它通过一个函数,把任意长度的数据转换为一个长 ...

  7. 俩表之间的添加Sql

    insert into 表3(字段1,字段2) select  表1.UserName,表2.GroupName  from 表1,表2 where ...

  8. &lbrack;转帖&rsqb;Git数据存储的原理浅析

    Git数据存储的原理浅析 https://segmentfault.com/a/1190000016320008   写作背景 进来在闲暇的时间里在看一些关系P2P网络的拓扑发现的内容,重点关注了Ma ...

  9. &dollar;&period;getJSON的缓存问题处理

    今天遇到jQuery.getJSON的缓存问题.如果其调用的url之前曾经调用过的话,回调函数就会直接在缓存里面取得想要得值,而不是进入到后台,调用存储过程了.这是一个比较郁闷的问题.不修改的话,用户 ...

  10. Cg入门11:Vertex Shader - 几何变换 —MVP矩阵变换(旋转、缩放)

    旋转.缩放demo C# Code: Shader Code: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize ...