zoukankan      html  css  js  c++  java
  • JavaScript闭包

    百度这样说:

    要执行的代码块(由于自由变量的存在,相关变量引用没有释放)和为自由变量提供绑定的计算环境(作用域)。

    经过一番学习,自己写了一个,下面是HTML:

    <div>列表中的第1个div</div>
    <div>列表中的第2个div</div>
    <div>列表中的第3个div</div>
    <div>列表中的第4个div</div>
    <div id="msg"></div>

    我将给每个div绑定一个onmouseover事件,这个是错误的JavaScript:

    var el = document.getElementsByTagName("div");
    var msg = document.getElementById("msg");
    for(var i = 0;i < el.length;i ++){
    el[i].onmouseover
    = function(){
    //随机颜色
    var t = '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6);
    msg.style.color
    = t;
    msg.innerHTML
    = "您划过了第" + (i + 1) + "个div标签";
    };
    }

    结果是每次都是第6个:

    错误的结果

    修改后的js:

    var el = document.getElementsByTagName("div");
    var msg = document.getElementById("msg");
    for(var i = 0;i < el.length;i ++){
    //闭包从这里开始
    (function(){
    var d = i;
    el[d].onmouseover
    = function(){
    //随机颜色
    var t = '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6);
    msg.style.color
    = t;
    msg.innerHTML
    = "您划过了第" + (d + 1) + "个div标签";
    };
    })();
    //闭包到这里结束
    }

    将当前的i赋值给d,d声明在一个匿名函数里,并执行了这个匿名函数。

    ------------------------------------------------------------------

    新说:2010-09-07补充

    上面的脚本完全可以这样写:

    var el = document.getElementsByTagName("div");
    var msg = document.getElementById("msg");
    for(var i = 0;i < el.length;i ++){
    (function(d){
    el[d].onmouseover
    = function(){
    var t = '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6);
    msg.style.color
    = t;
    msg.innerHTML
    = "您划过了第" + (d + 1) + "个div标签";
    };
    })(i);
    //变化在这里,以变量的方式传参进去  
    }

  • 相关阅读:
    【BZOJ1135】[POI2009]Lyz
    【BZOJ5110】[CodePlus2017]Yazid 的新生舞会
    「BZOJ2882」工艺
    【BZOJ3626】[LNOI2014]LCA
    [Wc]Dface双面棋盘()
    【BZOJ3307】雨天的尾巴
    [NOI2012]骑行川藏
    【BZOJ4919】[Lydsy六月月赛]大根堆
    bzoj4184
    3237: [Ahoi2013]连通图 线段树分治
  • 原文地址:https://www.cnblogs.com/ShepherdIsland/p/1765836.html
Copyright © 2011-2022 走看看