闭包 

<body onload="init();">
    <p>产品 0</p>
    <p>产品 1</p>
    <p>产品 2</p>
    <p>产品 3</p>
    <p>产品 4</p>
</body>

初学者常常会

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

这样只会弹出5，而不是0，1，2，3，4。

下面是解决的几种方法

//将变量 i 保存给在每个段落对象(p)上
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);
        }
    }
}
//加一层闭包，i 以函数参数形式传递给内层函数
function init12() {
    var pAry = document.getElementsByTagName("p");
    for(var i=0;
    i<pAry.length;

    i++) {
        (function(arg) {
            pAry[i].onclick = function() {
                alert(arg);
            }
            ;
        }
        )(i);
        //调用时参数
    }
}
//加一层闭包，i 以局部变量形式传递给内层函数
function init3() {
    var pAry = document.getElementsByTagName("p");
    for(var i=0;
    i<pAry.length;

    i++) {
        (function () {
            var temp = i;

            //调用时局部变量
            pAry[i].onclick = function() {
                alert(temp);
            }
        }
        )();
    }
}

 

posted @ 2016-03-14 16:39  付太  阅读(158)  评论(0)  编辑  收藏  举报