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