JavaScript闭包讨论的相关例子

先看看代码，然后点击连接看返回的值是不是你所预料的呢？

1. 第一 第二 第三 第四

   one : function(){
       var links = document.getElementById("one").getElementsByTagName("a");
       for (var i = 0; i < links.length; i++){
         var link = links[i];
         link.onclick = function(){
           alert(link.getAttribute("href"));
           return false;
         }
       }
     }

   代码并不会按照预期的方式运行，每一个连接的返回都是 #4.

2. 第一 第二 第三 第四

   two : function(){
       var links = document.getElementById("two").getElementsByTagName("a");
       for (var i = 0; i < links.length; i++){
         var link = links[i];
         link.onclick = function(){
           alert(this.getAttribute("href"));
           return false;
         }
       }
     }

   使用this关键字能指向被调用的对象。

3. 第一 第二 第三 第四

   three : function(){
       var attachLinkEvent = function(link){
         link.onclick = function(){
           alert(link.getAttribute("href"));
           return false;
         }
       }
       var links = document.getElementById("three").getElementsByTagName("a");
       for (var i = 0; i < links.length; i++){
         var link = links[i];
         attachLinkEvent(link);
       }
     }

   为什么定义一个函数再调用就可以保持links[i]不会被运行时销毁？因为JavaScript的垃圾回收器不会回收闭包（嵌套函数需要引用外部函数的参数）。

4. 第一 第二 第三 第四

   four : function(){
       var links = document.getElementById("four").getElementsByTagName("a");
       for (var i = 0; i < links.length; i++){
         (function(){
            var link = links[i];
            link.onclick = function(){
             alert(link.getAttribute("href"));
             return false;
            }
         })();
       }
     }

   其实用一个匿名函数更优雅……

5. 第一 第二 第三 第四

   five : function(){
       var links = document.getElementById("four").getElementsByTagName("a");
       for (var i = 0; i < links.length; i++){
         (function(){
            var link = links[i];
            link.onclick = function(){
             alert(this.getAttribute("href"));
             return false;
            }
         })();
       }
     }

   闭包里的this