JavaScript N种闭包演示
来源:互联网 发布:运动保温杯 知乎 编辑:程序博客网 时间:2024/06/05 22:45
先说说什么是闭包,我就用通俗易懂的语言来描述一下什么是闭包。
闭包,其实就是指程序语言中能让代码调用已运行的函数中所定义的局部变量。明了不?还不懂?不懂百度去吧。
有个网友问了个问题,如下的html,为什么每次输出都是5,而不是点击每个p,就alert出对应的1,2,3,4,5。
<html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>闭包演示</title> <script type="text/javascript"> function init() { var pAry = document.getElementsByTagName("p"); for( var i=0; i<pAry.length; i++ ) { pAry[i].onclick = function() { alert(i); } } } </script> </head> <body onload="init();"> <p>产品一</p> <p>产品二</p> <p>产品三</p> <p>产品四</p> <p>产品五</p> </body> </html>
解决方式有两种,
1、将变量 i 保存给在每个段落对象(p)上
function init() { var pAry = document.getElementsByTagName("p"); for( var i=0; i<pAry.length; i++ ) { pAry[i].i = i; pAry[i].onclick = function() { alert(this.i); } } }2、将变量 i 保存在匿名函数自身
function init2() { var pAry = document.getElementsByTagName("p"); for( var i=0; i<pAry.length; i++ ) { (pAry[i].onclick = function() { alert(arguments.callee.i); }).i = i; } }
再增加3种
3、加一层闭包,i以函数参数形式传递给内层函数
function init3() { var pAry = document.getElementsByTagName("p"); for( var i=0; i<pAry.length; i++ ) { (function(arg){ pAry[i].onclick = function() { alert(arg); }; })(i);//调用时参数 } }4、加一层闭包,i以局部变量形式传递给内存函数
function init4() { var pAry = document.getElementsByTagName("p"); for( var i=0; i<pAry.length; i++ ) { (function () { var temp = i;//调用时局部变量 pAry[i].onclick = function() { alert(temp); } })(); } }5、加一层闭包,返回一个函数作为响应事件(注意与3的细微区别)
function init5() { var pAry = document.getElementsByTagName("p"); for( var i=0; i<pAry.length; i++ ) { pAry[i].onclick = function(arg) { return function() {//返回一个函数 alert(arg); } }(i); } }
又有一种方法
6、用Function实现,实际上每产生一个函数实例就会产生一个闭包
function init6() { var pAry = document.getElementsByTagName("p"); for( var i=0; i<pAry.length; i++ ) { pAry[i].onclick = new Function("alert(" + i + ");");//new一次就产生一个函数实例 } }
再增加一种
7、用Function实现,注意与6的区别
function init7() { var pAry = document.getElementsByTagName("p"); for( var i=0; i<pAry.length; i++ ) { pAry[i].onclick = Function('alert('+i+')') } }转于:http://snandy.iteye.com/blog/250073
- JavaScript N种闭包演示
- Javascript倒计时演示
- Javascript日历演示控件
- JavaScript定时器演示
- 一个JavaScript演示程序
- JavaScript演示String对象
- JavaScript演示数组
- JavaScript演示Object对象
- JavaScript演示Math对象
- JavaScript演示全局方法
- JavaScript演示日期(Date)
- Javascript闭包演示
- javaScript中的Date演示
- Javascript闭包演示javascript
- JavaScript实现二级、多级(N级)联动下拉列表框更新版(续)- 四级联动的演示
- ------javascript------N
- JavaScript仿Excel表格演示
- JavaScript中的Math方法演示
- Sybase中java.sql.DataTruncation: Data truncation 错误
- 获得window句柄
- C++ [ 多态 ]
- android异常处理
- poj/pku 1904(强连通分量解决匹配问题)
- JavaScript N种闭包演示
- JS正则表达式常用用法
- 登陆oracle
- ASP.NET MVC Authorize - 自定义Authorize的实现
- Write operations are not allowed in read-only tomcat报错
- mysql/oracle多字段去重方法
- (转自丕子)核函数-Kernel Function汇总
- Android动画类型
- SQL Server 2008中的MERGE(不仅仅是合并)