闭包用法：经典案例

闭包用法：经典案例

学习一样技能，最终是想把它投入运用。我们从JS函数的最基础用法，一直研究到作用域链、闭包，这个过程消耗了我们大量的心血，那么闭包到底能用在哪些场景里面呢？下面将使用逐个枚举的方式给出运用闭包的典型战例。

请注意，以下的例子都是应用闭包的典型场景，当然如果你愿意，也可以把它叫做“代码模式”。深入理解，甚至记住这些场景，将会让你的闭包技法如有神助。

获取Table中被点击的行

例4.53

代码：

        

        

        

        

                  

                           

                                    

                                    

                                    

                                    

                                    

                           

                           

                                    

                                    

                                    

                                    

                                    

                           

                            //这里重复5个

，结构和上面一样

                  

第1列	第2列	第3列	第4列	第5列
1	2	3	4	5

                  

        

closure_example.js的代码如下：

function myEffect(){

         var console=document.getElementById('console');

         var tab=document.getElementById('mytab');

         var trs=tab.getElementsByTagName('tr');

         for(var i=0;i

                   var tr=trs[i];

                   tr.onmouseover=function(){

                            this.style.background="#ff0000";

                   }

                   tr.onmouseout=function(){

                            this.style.background="#ffffff";

                   }

                   tr.onclick=(function(){

                            var rowNum=i;

                            return function(){

                                     console.innerHTML="点击了第"+rowNum+"行";

                            }

                   })();

         }

}

解析：

因为有这一句，所以在body加载完成之后，myEffect()这个函数就被执行。myEffect做的事情很简单，它给每一个tr标签都添加了3个事件监听函数：onmouserover、onmouseout、onclick。前两个函数非常简单，无须解释。亮点在于第3个函数：

 

tr.onclick=(function(){

         var rowNum=i;

         return function(){

                   console.innerHTML="点击了第"+rowNum+"行";

         }

})();

从整体看，这是一个“自执行”函数，最终被注册给onclick事件的是内部return的这个匿名函数。那么，为什么要这么做呢？比如，和上面两个函数一样，做成这样可不可以呢？

tr.onclick= function(){

         console.innerHTML="点击了第"+i+"行";

};

注意，i是外层那个for循环里面定义的循环变量。你可以自己测试这个代码，最终结果是：无论你点击哪一行，结果都是“点击了第6行”。那么为什么会出现这种结果呢？这是因为在for循环的过程中，i始终代表的是同一个变量。虽然你看似给每个tr都注册了一个onclick函数，但是里面那个i最终指向的是同一个东西，它是随着for循环变化的。所以，在for循环结束之后，i将会一直是6。那么如何在for循环结束之后，让i一直保留for循环中对应的次序呢？这就是上面那个return函数的作用了。里面用一个局部变量var rowNum=i;把i的值“缓存”起来，然后即使外层的“自执行”函数退出，内部return出来的匿名函数仍然可以访问到对应顺序的值。

有了本章第3节对函数“作用域链”的研究，rowNum这个外层函数的局部变量被缓存在哪里，这种技法为什么能起作用，就无须多言了吧？

模拟多线程

例4.54

HTML代码：

        

        

        

                   添加线程" value="添加线程" onclick="addThread()">添加

                            线程

        

        

脚本代码：

//这里是一个简单的DIV工具，用来创建DIV

function DivUtil(){}

         DivUtil.prototype.counter=0;

         DivUtil.prototype.creatDiv=function(){

                   var div=document.createElement('div');

                   div.style.background='#ffff00';

                   div.id=this.counter++;

                   document.body.appendChild(div);

                   return div;

         }

         var divUtil=new DivUtil();

 

         //这里是“线程”类

         Thread=function(){}

         Thread.prototype.start=function(){

                   var div=divUtil.creatDiv();

                   if(div.id>=10){

                            div.innerHTML="只允许起10个线程，看看你的CPU，撑到爆！";

                            return;

                   }

                   var num=div.id;

                   setInterval(function(){

                            div.innerHTML="第"+div.id+"个线程运行中..."+(num++);

                   },50);

         }

 

         //工具函数，添加线程

         function addThread(){

                   var thread=new Thread();

                   thread.start();

         }

运行效果如图4-91所示。

 

图4-91  模拟多线程

解析：

这是一个非常有趣的例子，看起来就像启动了多个“线程”，核心的代码是这段：

var num=div.id;

setInterval(function(){

         div.innerHTML="第"+div.id+"个线程运行中..."+(num++);

},50);

因为闭包的缘故，在定时器setInterval所执行的函数中，可以一直访问外层函数中的局部变量num。

 

——本段文字节选自《EXT江湖》

图书详细信息:http://blog.chinaunix.net/space.php?uid=13164110&do=blog&id=3060643