我们经常在做前端面试题的时候,会遇到循环绑定事件后,输出打印结果,很多人总是搞不清楚,今天借此机会跟大家梳理一下闭包相关作用。

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利用闭包循环绑定事件的更多相关文章

  1. dom元素循环绑定事件的技巧

    以前总觉得自己写的代码不太规范,尤其是写原生的时候.举个例子: 要为页面上所有".a"的元素绑定事件,当然了用jquery很方便:$('.a').bind("click& ...

  2. JavaScript利用闭包实现模块化

    利用闭包的强大威力,但从表面上看,它们似乎与回调无关.下面一起来研究其中最强大的一个:模块. function foo() { var something = "cool"; va ...

  3. javascript:使用代理绑定事件

    <ul id="box"> <li>1</li> <li>2</li> <li>3</li> & ...

  4. JavaScript中给onclick绑定事件后return false遇到的问题

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. js的一个有意思的小题,闭包解决getElementByTagName的for循环绑定事件错误问题

    问: i 会输出什么?改写成闭包的写法? <a href="javaScript:void(0)">a</a> <a href="javaS ...

  6. for循环绑定事件,闭包思想!

    1.选项卡问题 总结:用alert()测试,是否得到对象. 2.闭包,解决作用域. <script> window.onload=function(){ var li=document.g ...

  7. jquery循环绑定事件

    <html> <head> <title></title> <script type="text/javascript" sr ...

  8. Angularjs 中 ng-repeat 循环绑定事件

    用ng-repeat循环是如果有ng-click之类的事件需要传入参数我们一般这样写 <span class='del' ng-click="RemoveCost({{item.Id} ...

  9. javascript闭包传参和事件的循环绑定

    今天看到一个javascript的题目,按常理循环绑定事件,但是得到的结果却不是想要的. <a href="#">text</a><br>< ...

随机推荐

  1. Logistic Regression理论总结

    简述: 1. LR 本质上是对正例负例的对数几率做线性回归,因为对数几率叫做logit,做的操作是线性回归,所以该模型叫做Logistic Regression. 2. LR 的输出可以看做是一种可能 ...

  2. git clone操作到开发机的错误记录

    在开发机上,执行操作 $ git clone https://github.com/xxx/rank.git 返回错误: error: The requested URL returned error ...

  3. iOS 将对象的属性和属性值拆分成key、value,通过字符串key来获取该属性的值

    这篇博客光看标题或许就会产生疑问,某个对象,只要它存在某个属性,且值不是空的,不就能直接用点方法获取吗,为什么要拆分成key和value多此一举呢?下面,我用一个例子告诉大家,既然这方法是存在的,那就 ...

  4. 【转】FLEX中SharedObject介绍及应用

    ShareObject介绍: 1 ShareObject,顾名思义共享对象,而通常意义上的共享,从B/S结构上来讲,无非是客户端(浏览器端)的共享和服务器端的共享了,不错,ShareObject刚好份 ...

  5. VB中的GDI编程-2 画笔

    p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...

  6. 老李分享:Android -自动化埋点 1

    老李分享:Android -自动化埋点   当我们开发一款Android应用上线后,希望能收集一些用户操作的行为数据,比如用户在某个页面点击了多少次,在某个控件被点击了多少次,在某个页面停 留了多少时 ...

  7. C语言常见错误笔记

    1. 职业化的程序员起码要具备两点: 1)基本的软件技能 2)不犯低级的错误 2. 修改函数的形参是没用的,函数本身占用的存储单元在堆栈中分配,入口参数的值会在函数入口处拷贝到堆栈中,一旦函数返回,其 ...

  8. 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 ...

  9. ArcGIS API for JavaScript 4.2学习笔记[27] 网络分析之最短路径分析【RouteTask类】

    要说网页端最经典的GIS应用,非网络分析莫属了. 什么?你没用过?百度高德谷歌地图的路线分析就是活生生的例子啊!只不过它们是根据大实际背景优化了结果显示而已. 这个例子使用RouteTask进行网络分 ...

  10. OCR文字识别帮助录入文字信息

    OCR文字识别是指将图片.照片上的文字内容,直接转换为可编辑文本的过程.目前各行各业不断地应用文字识别产品,解决文字录入工作的烦恼,提高工作效率. OCR文字识别用在哪里? 一个做社区工作的朋友透露, ...