经典闭包问题
这是一个经典的闭包问题,以前自己在项目中也曾遇到过,解决之后就不了了之。今天遇到一个人也遇到了同样的问题,看着很熟悉,于是想回答看看,但是确不知道该如何比较准确的来描述这个问题,我想是因为自己对这个问题了解得本身就不太深刻,所以才有这样的,无从说起的感觉吧!!所以仅以此文开始自己的博客之路...
闭包只能取得包含函数中任何变量的最后一个值
按照预期这段代码,在每个alert中显示节点的序号的,但是...
var li = document.getElementsByTagName("li"); function creatFunction( nodes){ for( var i = 0, len = nodes.length; i < len; i++){ nodes[i].onclick = function(){ alert(i); }; } } creatFunction(li);// 此次无论点击哪个Nodes,最终显示的都将是nodes.length
这是为什么呐,因为每个click事件函数的作用域链中都保存着creatFunction函数的活动对象,所以它们引用的都是同一个变量i.当creatFunction函数返回后,变量i的值为nodes.length-1,此时每个函数都引用着保存变量i的同一个变量对象,所以在每个函数内部i的值都是nodes.length-1
如何解决?
创建另一个匿名函数强制让闭包的行为符合预期
1 var li = document.getElementsByTagName("li"); 2 function creatFunction( nodes){ 3 for( var i = 0, len = nodes.length; i < len; i++){ 4 nodes[i].onclick = (function(i){ 5 return function(){ 6 alert(i); 7 }; 8 })(i); 9 } 10 } 11 creatFunction(li);