<html> <head> </head> <body> <input type="button" value="button1"/> <input type="button" value="button2"/> <input type="button" value="button3"/> <input type="button" value="button4"/> <input type="button" value="button5"/> <script type="text/javascript"> var x = document.getElementsByTagName("input"); function add_event_handlers(nodes){//外部函数 var i; for(i = 0; i<nodes.length;i+=1){ nodes[i].onclick = function(e){ //内部函数 alert(i); } } } add_event_handlers(x); </script> <p> 我们想要button提示出它的序号。但是结果却不尽如人意。 </p> <p> 为什么点击每个button的时候都是弹出来5,而不是我们想要的button的序列呢,究其原因是alert(i)中调用了i,这个i是在这个函数的外部的, ,当我们在外部函数(add_event_handlers)的外面调用了内部函数,从而产生了闭包。 闭包允许你引用存在于外部函数中的变量。然而,它并不是使用该变量创建时的值,相反,它使用外部函数中该变量最后的值。 也就是说,内部函数传递的参数i并不是单纯的值,传的是一个引用,也就是实实在在的i,当然取到的是最后的值。 </p> <p> 那我们应该实现我们的目的呢,学过c语言的都知道,传值和传址(传的引用)。我们这里可以把内部函数改成立即执行。 这时候取到的就是我们想要的i了。 </p> <pre> function add_event_handlers(nodes){//外部函数 var i; for(i = 0; i<nodes.length;i+=1){ nodes[i].onclick = function(i){ //内部函数 return function(e){ alert(i); } }(i); } } </pre> </body> </html>
js闭包浅谈
最新推荐文章于 2024-10-09 07:00:00 发布