超经典的闭包演示代码

简单明了的阐述了闭包的经典用法

by kixi

HTML

kixi.com.cn           <br>
清晰网                 <br>
从javascript开始       <br>
<button>0</button> 
<button>1</button> 
<button>2</button> 
<button>3</button>

JavaScript

//闭包、作用域链共同作用才能有正确的结果
var button = document.getElementsByTagName("button");

var addEventListener = function(nodes){    
    for(var i = 0; i < nodes.length; i++){
        
                              //另一个作用域链 ↓
        nodes[i].onclick = (function(anotherI){
            return function(){
                alert(anotherI);
            };
        })(i);
    }
}
addEventListener(button);

/* 错误的代码
* 因为javascript是单线程的关系，所以alert总是4，
* 因为js已经跑完了，值已经被刷新了

var button = document.getElementsByTagName("button");
var addEventListener = function(nodes){
    var i;

    for(i = 0; i < nodes.length; i++){
        nodes[i].onclick = function(e){
            alert(i);
        }
    }
}
addEventListener(button);
*/