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>< ...
随机推荐
- Sublime 常用快捷键
Ctrl+Shift+P:打开命令面板 Ctrl+P:搜索项目中的文件 Ctrl+G:跳转到第几行 Ctrl+W:关闭当前打开文件 Ctrl+Shift+W:关闭所有打开文件 Ctrl+Shift+V ...
- 什么是https
我们都知道HTTPS能够加密信息,以免敏感信息被第三方获取.所以很多银行网站或电子邮箱等等安全级别较高的服务都会采用HTTPS协议. HTTPS简介 HTTPS其实是有两部分组成:HTTP + SSL ...
- jquery data属性的使用
var func=function(){console.log("test")};$("div").data("test",func);$( ...
- Mycat中的核心概念
Mycat中的核心概念 Mycat中的核心概念 1.数据库中间件 Mycat 是一个开源的分布式数据库系统,但是由于真正的数据库需要存储引擎,而 Mycat 并没有 存储引擎,所以并 ...
- 深入hibernate的三种状态
学过hibernate的人都可能都知道hibernate有三种状态,transient(瞬时状态),persistent(持久化状态)以及detached(离线状态),大家伙也许也知道这三者之间的区别 ...
- h5开发app之在线生成二维码
h5通过jquery和qrcode在线生成二维码 首先我们需要下载一个qrcode.js文件,然后依次引入jquery和qrcode文件. 1.创建一个输入框以便做演示使用: <input id ...
- js 操作属性
操作属性: 对象.setAttribute('属性名','值'); - 添加属性 对象.getAttribute('属性名'); - 获取属性值,如无此属性,那么返回null 对象.removeAtt ...
- Java面向对象核心技能
1.封装 封装是面向对象的三大特性之一,就是将类的状态信息隐藏在类内部,不允许外部程序直接访问,而通过该类提供的方法来实现对隐藏信息的操作和访问. 封装的好处:隐藏类的实现细节:让使用者只能通过程序规 ...
- 2.Redis的基本配置
一.参数配置 redis.conf的主要配置参数的意义: daemonize:是否以后台daemon方式运行 pidfile:pid文件位置 port:监听的端口号 timeout:请求超时时间 lo ...
- Java Level 2 学习的八大名著
Java Level 2 学习的八大名著 前段时间有几天难得的假期,于是把自己认为Java技术栈中的精华总结了一下,但是一直没有时间写下来,今天终于得空希望本文可以对大家有所启发.通过多个实际项目的沉 ...