闭包的使用

当点击li的时候输出当前li的顺序。

<ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

JavaScript代码：

//点击li, 输出li的顺序
var list = document.getElementById('list').getElementsByTagName('li'), i, l;
for (i = 0, l = list.length; i < l; i++) {
    list[i].onclick = function () {
        console.log(i);
    }
}

这样写你会发现： 无论点击哪个，都是输出5。

点击的时候i是一个全局变量， 局部函数里面没有i这个值，所以会取全局函数，值为5。

所以问题在于如何把i的临时值'保存'下来。

//应使用闭包方式
for (i = 0, l = list.length; i < l; i++) {
    list[i].onclick = (function (arg) {
        return function () {   //onlick是一个function，所以要返回一个函数，否则就不用点击就直接输出了
            console.log(arg);
        };
    }(i));  //声明匿名函数，马上执行，传入i的值，达到'保存'的效果
}