美高梅开户-美高梅官方网站开户

您的位置:美高梅开户 > 美高梅官方网站开户 > Javascript闭包演示代码小结,javascript闭包传参和事

Javascript闭包演示代码小结,javascript闭包传参和事

发布时间:2019-09-17 11:07编辑:美高梅官方网站开户浏览(193)

    闭包演示

    今天看到一个javascript的题目,按常理循环绑定事件,但是得到的结果却不是想要的。

    产品 0

    复制代码 代码如下:

    产品 1

    <a href="#">text</a>
    <br>
    <a href="#">link</a>
    <script>
    var as = document.getElementsByTagName('a');
    for ( var i = as.length; i--; ) {
    as[i].onclick = function() {
    alert(i);
    return false;
    }
    }
    </script>

    产品 2

    1.这个代码点击链接弹出的i都是-1,这是为啥呢?

    产品 3

    简单来说就是函数变量作用域问题,如果把function() { alert(i); return false; } 当做一个函数 a();a()内部未定义变量i,但是内部使用了,于是向外查找,找到for循环里定义的i,点击事件是for循环完毕后才开始执行的,执行完毕后i的值已经变成-1;所以每次弹出的都是-1;

    产品 4

    1. 2个参数的for循环也不常见!疑惑?

    [Ctrl A 全选 注:如需引入外部Js需刷新才能执行]

      for(语句1,语句2,语句3){

    以上场景是初学者经常碰到的。即获取HTML元素集合,循环给元素添加事件。在事件响应函数中(event handler)获取对应的索引。但每次获取的都是最后一次循环的索引。
    原因是初学者并未理解JavaScript的闭包特性。通过element.onclick=function(){alert(i);}方式给元素添加点击事件。响应函数function(){alert(i);}中的 i 并非每次循环时对应的 i(如0,1,2,3,4)而是循环后最后 i 的值5。 或者说循环时响应函数内并未能保存对应的值 i,而是最后一次i 的值5。

        //todo

    了解了原因,摸索出了很多解决办法(纯粹是兴趣)。最先想到的前两种
    1、将变量 i 保存给在每个段落对象(p)上

      }

    复制代码 代码如下:

    a.for循环条件

    function init1() {
    var pAry = document.getElementsByTagName("p");
    for( var i=0; i<pAry.length; i ) {
    pAry[i].i = i;
    pAry[i].onclick = function() {
    alert(this.i);
    }
    }
    }

    通常说语句1、语句2、语句3都是可选的。

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

    b.语句 2:

    复制代码 代码如下:

      通常语句 2 用于评估初始变量的条件。

    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;
    }
    }

      语句 2 同样是可选的。

    后又想到了三种
    3、加一层闭包,i 以函数参数形式传递给内层函数

      如果语句 2 返回 true,则循环再次开始,如果返回 false,则循环将结束。

    复制代码 代码如下:

      提示:如果您省略了语句 2,那么必须在循环内提供 break。否则循环就无法停下来。这样有可能令浏览器崩溃。

    function init3() {
    var pAry = document.getElementsByTagName("p");
    for( var i=0; i<pAry.length; i ) {
    (function(arg){
    pAry[i].onclick = function() {
    alert(arg);
    };
    })(i);//调用时参数
    }
    }

    c.关于 i--判断:

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

      判断i--true /false的时候是先判断i再运算i--的。进入最后一次判断 i--的时候其实判断 i==0的时候,判断后又执行了一次i--,for循环终止, 于是i的值变成了-1;

    复制代码 代码如下:

      var i = 1;

    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);
    }
    })();
    }
    }

      !!i--;//ture

    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);
    }
    }

    var as = document.getElementsByTagName('a');
    for ( var i = as.length; i--; ) {
    (function(i){
    as[i].onclick = function() {
    alert(i);
    return false;
    }
    })(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一次就产生一个函数实例
    }
    }

    var as = document.getElementsByTagName('a');
    for ( var i = as.length; i--; ) {
    var a = function(i){
    as[i].onclick = function() {
    alert(i);
    return false;
    }
    }
    a(i);
    }

    7、用Function实现,注意与6的区别

    其他网友7中解决方法demo:

    本文由美高梅开户发布于美高梅官方网站开户,转载请注明出处:Javascript闭包演示代码小结,javascript闭包传参和事

    关键词: 美高梅开户

上一篇:美高梅官方网站开户延时器实现代码

下一篇:没有了