目标:点击任何一个li,提示当前点击位置

  <ul>
<li>第1个</li>
<li>第2个</li>
<li>第3个</li>
<li>第4个</li>
<li>第5个</li>
</ul>
<script>
var li = document.getElementsByTagName('li');
for (var i = 0; i< li.length; i++){
li[i].onclick = function(){
alert("[2]:"+i); // [2]
}
alert("[1]:"+i) // [1]
}
</script>

1、先执行[1]位置,弹出5次警示框从0到4,执行的是for语句,i 在for内部已经变为5

2、li[i],是获取的li的HTMLCollection对象,i[i]相当于li.item(i)

3、为li[i]绑定事件,li[i].onclick 。实际上此时执行的匿名函数动态绑定的li[i],但是匿名函数是在全局中挂起(我将它理解为调用另一个函数),点击任何li弹出框都报出数字5。

修改成闭包:

    <script>
var li = document.getElementsByTagName('li');
for (var i = 0; i< li.length; i++){ li[i].onclick = (function(num){
return function(){alert(num);}
})(i); }
</script>

每一个li[i],单独调用闭包后的函数,可以理解为每个li[i]单独传值制造函数。

理解闭包:

1. 视为正在执行新函数,且绑定在数据链上的函数,因此如果直接调用内部函数则会报错。(从新生成占用内存,因此谨慎使用)

var foo = {
baz: ,
bar: function() {
return (function(that){
return that.baz;
})(this)
}
};
console.log( foo.bar() ) // 1

2.闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便。

3.闭包的执行。

var f = (
function f(){ return ""; },
function g(){ return ; }
)();
typeof f; // "number"

类似于

function f(){
function f(){
var a = ;
return a;
};
function g(){
var b =;
return b;
}
return LastOne() // lastone 代表最后执行的函数
};
console.log(f());

相关知识点:

1.作用域:

外部不能调用局部变量。但是可以通过返回函数这种变通的方法调用到局部变量

function f1(){
    n=;
    function f2(){
      alert(n);
    }
    return f2;
  }
  var result=f1();
  result(); // 999 ,如果调用result会返回function f2()这个函数,加()代表执行

Js闭包与循环的更多相关文章

  1. JS闭包导致循环给按钮添加事件时总是执行最后一个

    加入如下脚本代码: <script> var list_obj = document.getElementsByTagName('li'); for (var i = 0; i <= ...

  2. js闭包for循环总是只执行最后一个值得解决方法

    <style> li{ list-style: none;width:40px;height: 40px;text-align:center;line-height: 40px;curso ...

  3. js闭包的作用域以及闭包案列的介绍:

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

  4. js闭包理解实例小结

    Js闭包 闭包前要了解的知识  1. 函数作用域 (1).Js语言特殊之处在于函数内部可以直接读取全局变量 <script type="text/javascript"> ...

  5. js闭包和ie内存泄露原理

    也议 js闭包和ie内存泄露原理 可以, 但小心使用. 闭包也许是 JS 中最有用的特性了. 有一份比较好的介绍闭包原理的文档. 有一点需要牢记, 闭包保留了一个指向它封闭作用域的指针, 所以, 在给 ...

  6. js闭包实例汇总

    本文是通过实例来帮助大家深刻理解js闭包,是篇非常不错的文章,这里推荐给大家,有需要的小伙伴可以参考下 Js闭包 闭包前要了解的知识 1. 函数作用域 (1).Js语言特殊之处在于函数内部可以直接读取 ...

  7. 关于js闭包之小问题大错误

    闭包是 JavaScript 开发的一个关键方面:匿名函数可以访问父级作用域的变量. 如果闭包的作用域中保存着一个 HTML 元素,则该元素无法被销毁.(下面代码来自高程) 刚看到一个关于闭包自己没注 ...

  8. js闭包之我见

    很久前的一个问题终于得以解决,内心是无比喜悦的,不多说,先上代码: function test(){ for(var i=0;i<5;i++){ window.onclick=function( ...

  9. js闭包引起的事件注册问题

    背景:闲暇时间看了几篇关于js作用域链与闭包的文章,偶然又看到了之前遇到的一个问题,就是在for循环中为dom节点注册事件驱动,具体见下面代码: <!DOCTYPE html> <h ...

随机推荐

  1. C++死锁解决心得

    一. 概述C++多线程开发中,容易出现死锁导致程序挂起的现象.关于死锁的信息,见百度百科http://baike.baidu.com/view/121723.htm. 解决步骤分为三步:1.检测死锁线 ...

  2. Labeling Balls(拓扑排序wa)

    Labeling Balls Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 12466   Accepted: 3576 D ...

  3. android部分控件应用解析

    java中的接口回调机制图解 1. Adapter 接口概述   Adapter是一个顶层列表视图和底层数据的桥梁,通过adapter可以获取列表视图中所体现的数据条目,并且通过adapter可以为数 ...

  4. 对XXX(数字)安全卫士实在是忍无可忍了,为什么一定要像日本鬼子强奸妇女一样强奸我们这些弱小者

    一直一来对XXX(数字)安全卫士非常痛恨,无耻,恶心,没有底线,还有对待我们这些弱小者,就像当年日本鬼子强奸妇女一样,血粼粼的虐杀我们这些弱小者,无法反抗,又必须接受. 你强制杀掉别人的ADB 就算了 ...

  5. 让你在DOS中任意切换目录

    尽管Windows图形界面早已经取代了无趣的DOS字符界面(废话,Vista都呼之欲出了),不过在日常操作中,还是有很多时候需要用到命令提示符.比如批量重命名文件时.执行字符命令时.在命令行下恢复系统 ...

  6. STL模板_容器概念

    一.STL(Standard Template Library,标准模板库)概述1.容器:基于泛型的数据结构.2.算法:基于泛型的常用算法.3.迭代器:以泛型的方式访问容器中的元素,是泛型的算法可以应 ...

  7. USACO Section 3.3 Camlot(BFS)

    BFS.先算出棋盘上每个点到各个点knight需要的步数:然后枚举所有点,其中再枚举king是自己到的还是knight带它去的(假如是knight带它的,枚举king周围的2格(网上都这么说,似乎是个 ...

  8. 如何让对象只在堆或者栈中分配空间ANDC++禁止一个类被继承

    在开始之前先来分析一下C++中的new运算符和operator new之间的关联. new:指我们在C++里通常用到的运算符,比如A* a = new A或者调用带参数的构造函数;  对于new来说, ...

  9. Spark学习之RDD的理解

    转自:http://www.infoq.com/cn/articles/spark-core-rdd/ 感谢张逸老师的无私分享 RDD,全称为Resilient Distributed Dataset ...

  10. Java基础之静态变量

    public class StaticVariable { public static void main(String[] args) { Person p1 = new Person(); Per ...