有个网友问了个问题，如下的html，为什么每次输出都是5

  1. <html >
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>闭包演示</title>
  5. <style type="text/css">
  6. </style>
  7. <script type="text/javascript">
  8. function init() {
  9. var pAry = document.getElementsByTagName("p");
  10. for( var i=0; i<pAry.length; i++ ) {
  11. pAry[i].onclick = function() {
  12. alert(i);
  13. }
  14. }
  15. }
  16. </script>
  17. </head>
  18. <body onload="init();">
  19. <p>产品一</p>
  20. <p>产品一</p>
  21. <p>产品一</p>
  22. <p>产品一</p>
  23. <p>产品一</p>
  24. </body>
  25. </html>

解决方式有两种， 
1、将变量 i 保存给在每个段落对象（p）上

  1. function init() {
  2. var pAry = document.getElementsByTagName("p");
  3. for( var i=0; i<pAry.length; i++ ) {
  4. pAry[i].i = i;
  5. pAry[i].onclick = function() {
  6. alert(this.i);
  7. }
  8. }
  9. }

2、将变量 i 保存在匿名函数自身

  1. function init2() {
  2. var pAry = document.getElementsByTagName("p");
  3. for( var i=0; i<pAry.length; i++ ) {
  4. (pAry[i].onclick = function() {
  5. alert(arguments.callee.i);
  6. }).i = i;
  7. }
  8. }

再增加3种

3、加一层闭包，i以函数参数形式传递给内层函数

  1. function init3() {
  2. var pAry = document.getElementsByTagName("p");
  3. for( var i=0; i<pAry.length; i++ ) {
  4. (function(arg){
  5. pAry[i].onclick = function() {
  6. alert(arg);
  7. };
  8. })(i);//调用时参数
  9. }
  10. }

4、加一层闭包，i以局部变量形式传递给内存函数

  1. function init4() {
  2. var pAry = document.getElementsByTagName("p");
  3. for( var i=0; i<pAry.length; i++ ) {
  4. (function () {
  5. var temp = i;//调用时局部变量
  6. pAry[i].onclick = function() {
  7. alert(temp);
  8. }
  9. })();
  10. }
  11. }

5、加一层闭包，返回一个函数作为响应事件（注意与3的细微区别）

  1. function init5() {
  2. var pAry = document.getElementsByTagName("p");
  3. for( var i=0; i<pAry.length; i++ ) {
  4. pAry[i].onclick = function(arg) {
  5. return function() {//返回一个函数
  6. alert(arg);
  7. }
  8. }(i);
  9. }
  10. }

又有一种方法

6、用Function实现，实际上每产生一个函数实例就会产生一个闭包

  1. function init6() {
  2. var pAry = document.getElementsByTagName("p");
  3. for( var i=0; i<pAry.length; i++ ) {
  4. pAry[i].onclick = new Function("alert(" + i + ");");//new一次就产生一个函数实例
  5. }
  6. }

from:http://zhouyrt.javaeye.com/blog/250073

js闭包演示的更多相关文章

  1. js 闭包演示

    function test2() { var scope = "global scope"; var f = enclose(scope); scope = 'aaa'; aler ...

  2. js闭包中的this（匿名函数中的this指向的是windows）

    js闭包中的this(匿名函数中的this指向的是windows) 一.总结 1.普通函数中的this指向的是对象,匿名函数中的this指向的是windows,和全局变量一样 2.让匿名函数中的thi ...

  3. js闭包作用（避免使用全局变量）

    js闭包作用(避免使用全局变量) 一.总结 1.优点::可以把局部变量驻留在内存中,可以避免使用全局变量; 2.缺点:也有占用更多内存的缺点,用完要及时让垃圾回收器回收  fn=null //应及时解 ...

  4. js闭包（函数内部嵌套一个匿名函数：这个匿名函数可将所在函数的局部变量常驻内存）

    js闭包(函数内部嵌套一个匿名函数:这个匿名函数可将所在函数的局部变量常驻内存) 一.总结 1.闭包:就是在一个函数内部嵌套一个匿名函数,这个匿名函数可以访问这个函数的变量. 二.要点 闭包 闭包的相 ...

  5. js 闭包 理解

    1.什么是闭包 定义:是指有权访问另一个函数作用域中的变量的函数 创建闭包:在一个函数内部创建另一个函数 基本特点 在返回的匿名函数中 可以调用外部函数的变量 如下例中所示 内部函数(匿名函数) 可以 ...

  6. js闭包的作用域以及闭包案列的介绍：

    转载▼ 标签: it   js闭包的作用域以及闭包案列的介绍:   首先我们根据前面的介绍来分析js闭包有什么作用,他会给我们编程带来什么好处? 闭包是为了更方便我们在处理js函数的时候会遇到以下的几 ...

  7. 大部分人都会做错的经典JS闭包面试题

    由工作中演变而来的面试题 这是一个我工作当中的遇到的一个问题,似乎很有趣,就当做了一道题去面试,发现几乎没人能全部答对并说出原因,遂拿出来聊一聊吧. 先看题目代码: function fun(n,o) ...

  8. Js闭包常见三种用法

        Js闭包特性源于内部函数可以将外部函数的活动对象保存在自己的作用域链上,所以使内部函数的可以将外部函数的活动对象占为己有,可以在外部函数销毁时依然存有外部函数内的活动对象内容,这样做的好处是可 ...

  9. js闭包之初步理解（ JavaScript closure）

    闭包一直是js中一个比较难于理解的东西,而平时用途又非常多,因此不得不对闭包进行必要的理解,现在来说说我对js闭包的理解. 要理解闭包,肯定是要先了解js的一个重要特性, 回想一下,那就是函数作用域, ...

随机推荐

  1. window.onload =writeMessage(); 与window.onload =writeMessage;的区别

    window.onload =writeMessage(); window.onload =writeMessage; 异:第一种是window加载时执行writeMesage方法,第二种是把writ ...

  2. 新型的Hbb项目目录结构

    - Hbb - ComponentPacket (底层组件包) 数据库组件 网络组件 格式化组件 - Resources (存放所有图片资源文件) - ToolClass (工具类/Helper 独立 ...

  3. Android app AOP添加埋点技术总结

    目标:通过面向切面编程来实现对源代码无侵入的埋点.     方式 能力 缺点 学习曲线   XPosed 运行期hook 能hook自己应用进程的方法: 能hook别的应用的方法: 能hook系统方法 ...

  4. bzoj4025 二分图

    支持加边和删边的二分图判定,分治并查集水之(表示我的LCT还很不熟--仅仅停留在极其简单的模板水平). 由于是带权并查集,并且不能路径压缩,所以对权值(到父亲距离的奇偶性)的维护要注意一下. 有一个小 ...

  5. Android手机刷recovery

    以前觉得android刷机是件很麻烦的事,现在倒不觉得了.  只要手机刷入第三方的recovery,一切都好办了,无论是root还是刷google play.  recovery开源的有两大阵营,tw ...

  6. java---构造器

    public class SomeTrying{ public static void main(String[] args){ new Son(); new Son().Father(); } } ...

  7. 463. Island Perimeter

    https://leetcode.com/problems/island-perimeter/ 在一个N×N的矩阵中,N<100,1代表岛,0代表海,岛内没有海,求岛的周长 [[0,1,0,0] ...

  8. iOS 手势识别器（UIGestureRecognizer）

    UIGestureRecognizer是一个抽象类,定义了所有手势的基本行为,使用它的子类才能处理具体的手势. UIGestureRecognizer的子类有: UITapGestureRecogni ...

  9. 判断一个字符串str不为空的方法

    1.str == null; 2."".equals(str); 3.str.length 4.str.isEmpty(); 注意:length是属性,一般集合类对象拥有的属性,取 ...

  10. A Complete List of .NET Open Source Developer Projects

    http://scottge.net/2015/07/08/a-complete-list-of-net-open-source-developer-projects/?utm_source=tuic ...