闭包问题

经典闭包

for(var i = 0; i < 5; i++){
    oLi[i].onclick = function(){
        console.log("You clicked element # " + i);             // 输出全为5
    }
}

1.使用立即执行函数表达式

for(var i = 0; i < 5; i++){
    (function(i){
        oLi[i].onclick = function(){
            console.log("You clicked element # " + i);
        }
    })(i)
}

2.使用立即执行函数表达式（IIFE）再创建一个闭包

for(var i = 0; i < 5; i++){
    oLi[i].onclick = (function(i){
        return function() {
            console.log('You clicked element #' + i);
        }
    })(i)
}

3.将变量 i 保存给在每个段落对象 li 上

for(var i = 0; i < 5; i++){
    oLi[i].index = i;
    oLi[i].onclick = function(){
        console.log("You clicked element # " + this.index);
    }
}

4.for循环的闭包(加一层闭包，i以局部变量形式传递给内存函数)

for(var i = 0; i < 5; i++){
    (function(){
        var item = i;
        oLi[i].onclick = function(){
            console.log("You clicked element # " + item);
        }
    }())
}

5.ES6 中的let

for(let i = 0; i < 5; i++){
    oLi[i].onclick = function(){
        console.log("You clicked element # " + i);
    }
}

 

5.使用立即执行函数表达式（IIFE）再创建一个闭包

var nodes = document.getElementsByTagName('button');
for (var i = 0; i < nodes.length; i++) {
   nodes[i].addEventListener('click', (function(i) {
      return function() {
         console.log('You clicked element #' + i);
      }
   })(i));
}

6.另一个解决方案不使用IIFE，而是将函数移到循环的外面

function handlerWrapper(i) {
   return function() {
      console.log('You clicked element #' + i);
   }
}
 
var nodes = document.getElementsByTagName('button');
for (var i = 0; i < nodes.length; i++) {
   nodes[i].addEventListener('click', handlerWrapper(i));
}