在一篇博客中看到了以下代码示例,用来讲解闭包,觉得非常不错,拿来分享一下。
var btns = document.querySelectorAll('.btn'); // 6 elements
var output = document.querySelector('#output');
var events = [1, 2, 3, 4, 5, 6];
// Case 1
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function(evt) {
output.innerText += 'Clicked ' + events[i];
};
}
// Case 2
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = (function(index) {
return function(evt) {
output.innerText += 'Clicked ' + events[index];
};
})(i);
}
// Case 3
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = (function(event) {
return function(evt) {
output.innerText += 'Clicked ' + event;
};
})(events[i]);
}
原博客中解释的比较简单,我在这稍微补充一下。
CASE1是一个错误的案例,运行结果将是每个按钮点击,都会得到 ‘Clicked undefined’。
原因是因为在 JavaScript 中 for 语句不能产生一个闭包,而 function是闭包,于是在执行 onclick 赋值的时候,for循环事实上已经结束了,
此时 i 的值为 6 ,于是所有按钮的点击事件里 i 都为 7,所以没能得到预期的效果。
CASE2 CASE3 都可以得到语气的结果,只是CASE3中,闭包使用了值传递的方式,闭包内没有保持 events 的引用,使得外部的 events 可以被 GC ,
故而程序内存占用的更少,性能更加,是个值得推荐的写法。