JavaScript中for循环总是输出最大值问题的几种解决方式

假设我们做一个选项卡，可以通过点击每个li来进行切换，但这个时候使用for循环来获取对应的每个li值时，发现了一个问题，就是无论你点击哪一个li，它总是输出最后的一个值，而解决这个问题的方法，有下面的几种：

这里是html的部分代码，我用三个li来演示：

<ul id="box">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    window.onload = function(){
        var oul = document.getElementById('box');
        var oli = oul.getElementsByTagName('li');
        //下面的js代码都将是写在这行注释的后面
        ......
</script>

下面是javascript的实现代码：

//方法1:加一层闭包，i以函数参数形式传递给内层函数
for(var i=0;i<oli.length;i++){
    (function(j){
        oli[i].onclick = function(){
            console.log(j);
        }
    })(i);//调用时的参数
}

//方法2:加一层闭包，i以局部变量形式传递给内层函数
for(var i=0;i<oli.length;i++){
    (function(){
        var tmp = i;//调用时的局部变量
        oli[i].onclick = function(){
            console.log(tmp);
        }
    })();
}

//方法3:加一层闭包，返回一个函数作为响应事件
for(var i=0;i<oli.length;i++){
    oli[i].onclick = function(arg){
        return function(){//返回一个函数
            console.log(arg);
        }
    }(i);
}

//方法4:将变量 i 保存给在每个li对象上
for(var i=0;i<oli.length;i++){
    oli[i].index = i;//index可以取自定义的名称
    oli[i].onclick = function(){
        console.log(this.index);
    }   
}

//方法5:将变量 i 保存在匿名函数自身
for(var i=0;i<oli.length;i++){
    (oli[i].onclick = function(){
            console.log(arguments.callee.index);
    }).index = i;//index可以取自定义的名称
}

callee返回正被执行的 Function 对象，也就是所指定的 Function 对象的正文。callee属性是 arguments 对象的一个成员，它表示对函数对象本身的引用。

//方法6:用Function实现，实际上每产生一个函数实例就会产生一个闭包
for(var i=0;i<oli.length;i++){
    oli[i].onclick = new Function("console.log("+i+");");
}
//Function("console.log("+i+");")等价于
//function anonymous() {
//console.log(i);
//}

ECMAScript用 Function 类直接创建函数的语法：

var function_name = new Function(arg1, arg2, ..., argN, function_body);

在上面的形式中，每个 arg 都是一个参数，最后一个参数是函数主体（要执行的代码）。当你通过这种方式去构造一个函数时，通过输出function_name，可以看到整个函数的真正实体。如下：

//这里把上面的函数修改了一下，只写了两个参数，把function_body换成
//console.log(arg1+arg2)，当把这个函数输出时，可以看到下面的代码
function anonymous(arg1,arg2
/*``*/) {
console.log(arg1+arg2);
}

//方法7:用Function实现，与6有一点区别
for(var i=0;i<oli.length;i++){
    oli[i].onclick = Function("console.log("+i+");");
}