大家好，又见面了，我是你们的朋友全栈君。
闭包
内部函数拥有比它的外部函数更长的生命周期！！！
函数可以访问它被创建时所处的上下文环境！！！
内部函数能访问外部函数的实际变量，而无需复制！
实例：
/*
* 点击li标签时，调用其onclick事件，执行代码段function(){alert(i);}
* 此时，i在全局中的值为4
*/
window.onload = init;
function init(){
var lis = document.getElementById("wrap").getElementsByTagName("li");
var i;
for(i=0;i<lis.length;i++){
lis[i].onclick = function(){
alert(i); // 结果：点击每个li都弹出4
};
}
}
/*
* 执行onclick过程，调用(2)处函数，并不是调用(1)处函数；
* 而(1)也存活，存活域中不存在变量i
*/
window.onload = init;
function init(){
var lis = document.getElementById("wrap").getElementsByTagName("li");
var i;
for(i=0;i<lis.length;i++){
lis[i].onclick = function(i){ //(1)
return function(){ //(2)
alert(i);
}; // 结果：undefined
}();
}
}
/*
* 执行onclick过程，调用(2)处函数，并不是调用(1)处函数；
* 而(1)也存活，存活域中不存在变量i；
* 变量i在循环时暂存储到了匿名函数中
*/
window.onload = init;
function init(){
var lis = document.getElementById("wrap").getElementsByTagName("li");
var i;
for(i=0;i<lis.length;i++){
lis[i].onclick = (function(i){ //(1)
return function(){ //(2)
alert(i);
}; // 结果：正确
})(i);
}
}
/*
* 页面加载时，在for循环中，为每个li标签绑定onclick事件；
* 执行函数liclick()，依次弹出0,1,2,3
*/
window.onload = init;
var liclick = function(index){
alert(index);
}
function init(){
var lis = document.getElementById("wrap").getElementsByTagName("li");
var i;
for(i=0;i<lis.length;i++){
lis[i].onclick = liclick(i); // 结果：加载页面时自动弹出0,1,2,3
}
}
/*
* 页面加载时，在for循环中，为每个li标签绑定onclick事件；
* 执行函数liclick()，该函数返回值为一个匿名函数，i暂存到匿名函数中，不会立即执行；
* 用户点击li标签时，触发匿名函数
*/
window.onload = init;
var liclick = function(index){
return function(){
alert(index);
}
}
function init(){
var lis = document.getElementById("wrap").getElementsByTagName("li");
var i;
for(i=0;i<lis.length;i++){
lis[i].onclick = liclick(i); // 结果：正确
}
}
常用解决方案：
（1）给对应的li添加一个属性记录是第几个如 id=0,1,2,3
（2）将函数外移，避免函数套函数
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/148007.html原文链接：https://javaforall.net
