闭包的经典演示

闭包的经典演示

by kixi

HTML

<button>0</button> 
<button>1</button> 
<button>2</button> 
<button>3</button>
<button>kixi.com.cn</button>

CSS

/*
清晰网
kixi.com.cn
从javascript开始
*/

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);
*/