JavaScript利用闭包循环绑定事件
我们经常在做前端面试题的时候,会遇到循环绑定事件后,输出打印结果,很多人总是搞不清楚,今天借此机会跟大家梳理一下闭包相关作用。
1.首先我们举一个简单的例子。
html部分:
<a href="#">首页</a>
<a href="#">作品</a>
<a href="#">文章</a>
<a href="#">工具</a>
<a href="#">招聘</a>
<a href="#">赛事</a>
<a href="#">更多</a>
js部分:
var a = document.getElementsByTagName("a");
for(var i =0; i<a.length; i++){
a[i].onclick = function(){
alert(i);
}
}
现在如果点击“首页”链接,大家认为会弹出什么数字? 答案是7,因为循环绑定以后,i最终为7,所以打印出来的结果就是 7
2.下面我们使用闭包进行封装一次。
var a = document.getElementsByTagName("a");
for(var i =0; i<a.length; i++){
a[i].onclick = (function(i){
return function(){alert(i);}
})(i);
}
此时,再次进行测试,点击超链接以后,弹出对应的索引值,这就是闭包的作用之一,闭包引用外部变量后,暂时不会被系统回收,onclick后面的代码即为:立即执行一个函数,并且将i变量传递进去,执行函数的时候,内部返回了一个函数,同时,返回的函数内部会引用该参数,因而锁定了此变量。当年点击某一个a链接时,就会执行此return 后面的函数,弹出对应的结果。
闭包简单的说,就是方法里面套方法,最终形成闭包,那么经过我个人的总结经验,闭包的作用主要有:
A:使用闭包可以访问某函数的局部变量,同时这些变量都一直存在于内存中。例如:
function func1(){
var n=999;
}
alert(n); // error
使用闭包后:
function func1(){
var n=999;//局部变量,外部函数无法访问
function func2(){
alert(n);
}
return func2;//返回内部函数
}
var result=func1();
result(); // 999
此时,可借助于闭包访问f1函数的内部变量n,这就是闭包的功效之一,可以访问某函数的局部变量。
B:防止空间污染。闭包中的变量不会被外界访问,因而,内部和外部是隔断的,从而减少变量重复带来的困惑。
闭包的不好之处:
如果闭包引用外部变量,则此变量会一直存在于内存当中,从而降低性能,这也就是为什么,使用闭包循环绑定事件后,点击会弹出对应数字的效果了。
另外,很多Jquery插件再开发的过程中,都会使用闭包,如下:
(function($){
//to-do ...
})(jQuery);
这种写法,就很好的保护了空间变量,不会污染到外面的对象,所有的操作都在闭包内部执行。 以上只是个人前端对于闭包的经验之谈,每个人理解的可能不一样,有不对的地方,可指出来,我加以修正,谢谢。
JavaScript利用闭包循环绑定事件的更多相关文章
- dom元素循环绑定事件的技巧
以前总觉得自己写的代码不太规范,尤其是写原生的时候.举个例子: 要为页面上所有".a"的元素绑定事件,当然了用jquery很方便:$('.a').bind("click& ...
- JavaScript利用闭包实现模块化
利用闭包的强大威力,但从表面上看,它们似乎与回调无关.下面一起来研究其中最强大的一个:模块. function foo() { var something = "cool"; va ...
- javascript:使用代理绑定事件
<ul id="box"> <li>1</li> <li>2</li> <li>3</li> & ...
- JavaScript中给onclick绑定事件后return false遇到的问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js的一个有意思的小题,闭包解决getElementByTagName的for循环绑定事件错误问题
问: i 会输出什么?改写成闭包的写法? <a href="javaScript:void(0)">a</a> <a href="javaS ...
- for循环绑定事件,闭包思想!
1.选项卡问题 总结:用alert()测试,是否得到对象. 2.闭包,解决作用域. <script> window.onload=function(){ var li=document.g ...
- jquery循环绑定事件
<html> <head> <title></title> <script type="text/javascript" sr ...
- Angularjs 中 ng-repeat 循环绑定事件
用ng-repeat循环是如果有ng-click之类的事件需要传入参数我们一般这样写 <span class='del' ng-click="RemoveCost({{item.Id} ...
- javascript闭包传参和事件的循环绑定
今天看到一个javascript的题目,按常理循环绑定事件,但是得到的结果却不是想要的. <a href="#">text</a><br>< ...
随机推荐
- Logistic Regression理论总结
简述: 1. LR 本质上是对正例负例的对数几率做线性回归,因为对数几率叫做logit,做的操作是线性回归,所以该模型叫做Logistic Regression. 2. LR 的输出可以看做是一种可能 ...
- git clone操作到开发机的错误记录
在开发机上,执行操作 $ git clone https://github.com/xxx/rank.git 返回错误: error: The requested URL returned error ...
- iOS 将对象的属性和属性值拆分成key、value,通过字符串key来获取该属性的值
这篇博客光看标题或许就会产生疑问,某个对象,只要它存在某个属性,且值不是空的,不就能直接用点方法获取吗,为什么要拆分成key和value多此一举呢?下面,我用一个例子告诉大家,既然这方法是存在的,那就 ...
- 【转】FLEX中SharedObject介绍及应用
ShareObject介绍: 1 ShareObject,顾名思义共享对象,而通常意义上的共享,从B/S结构上来讲,无非是客户端(浏览器端)的共享和服务器端的共享了,不错,ShareObject刚好份 ...
- VB中的GDI编程-2 画笔
p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...
- 老李分享:Android -自动化埋点 1
老李分享:Android -自动化埋点 当我们开发一款Android应用上线后,希望能收集一些用户操作的行为数据,比如用户在某个页面点击了多少次,在某个控件被点击了多少次,在某个页面停 留了多少时 ...
- C语言常见错误笔记
1. 职业化的程序员起码要具备两点: 1)基本的软件技能 2)不犯低级的错误 2. 修改函数的形参是没用的,函数本身占用的存储单元在堆栈中分配,入口参数的值会在函数入口处拷贝到堆栈中,一旦函数返回,其 ...
- Android 开发之错误整理 [2014-04-28 09:22:28 - XXXX] Unable to resolve target 'android-18'
在开发的时候难免会导入项目,那么怎么经常会遇到这个错误: [2014-04-28 09:22:28 - XXXX] Unable to resolve target 'android-18' targ ...
- ArcGIS API for JavaScript 4.2学习笔记[27] 网络分析之最短路径分析【RouteTask类】
要说网页端最经典的GIS应用,非网络分析莫属了. 什么?你没用过?百度高德谷歌地图的路线分析就是活生生的例子啊!只不过它们是根据大实际背景优化了结果显示而已. 这个例子使用RouteTask进行网络分 ...
- OCR文字识别帮助录入文字信息
OCR文字识别是指将图片.照片上的文字内容,直接转换为可编辑文本的过程.目前各行各业不断地应用文字识别产品,解决文字录入工作的烦恼,提高工作效率. OCR文字识别用在哪里? 一个做社区工作的朋友透露, ...