JS用闭包保存状态
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 // 这个代码是错误的,因为变量i从来就没背locked住 2 // 相反,当循环执行以后,我们在点击的时候i才获得数值 3 // 因为这个时候i操真正获得值 4 // 所以说无论点击那个连接,最终显示的都是I am link #10(如果有10个a元素的话) 5 6 var elems = document.getElementsByTagName('a'); 7 8 for (var i = 0; i < elems.length; i++) { 9 10 elems[i].addEventListener('click', function (e) { 11 e.preventDefault(); 12 alert('I am link #' + i); 13 }, 'false'); 14 15 } 16 17 // 这个是可以用的,因为他在自执行函数表达式闭包内部 18 // i的值作为locked的索引存在,在循环执行结束以后,尽管最后i的值变成了a元素总数(例如10) 19 // 但闭包内部的lockedInIndex值是没有改变,因为他已经执行完毕了 20 // 所以当点击连接的时候,结果是正确的 21 22 var elems = document.getElementsByTagName('a'); 23 24 for (var i = 0; i < elems.length; i++) { 25 26 (function (lockedInIndex) { 27 28 elems[i].addEventListener('click', function (e) { 29 e.preventDefault(); 30 alert('I am link #' + lockedInIndex); 31 }, 'false'); 32 33 })(i); 34 35 } 36 37 // 你也可以像下面这样应用,在处理函数那里使用自执行函数表达式 38 // 而不是在addEventListener外部 39 // 但是相对来说,上面的代码更具可读性 40 41 var elems = document.getElementsByTagName('a'); 42 43 for (var i = 0; i < elems.length; i++) { 44 45 elems[i].addEventListener('click', (function (lockedInIndex) { 46 return function (e) { 47 e.preventDefault(); 48 alert('I am link #' + lockedInIndex); 49 }; 50 })(i), 'false'); 51 52 }