javascriptの閉鎖の一例

16132 ワード
JavaScript 
<html>

<head>

    <title>elementFromPoint</title>

    <script type="text/javascript">

 window.onload = function(){  

        for(var i=0; i<6; i++){  

            var alink = document.createElement('a');  

            var titleText = document.createTextNode(' ' + (i+1) + ' ');  

            alink.appendChild(titleText);  

            alink.href = "javascript:void(0)";  

            alink.onclick = function(){alert(i)};

            var div = document.getElementById('show-detail');         

            div.appendChild(alink);  

        }  

    }  

    </script>

</head>

<body>



<div id="show-detail">   </div> 

</body>

</html>
これはlinkのセットです.どのlinkをクリックしても結果はいつも6です.なぜですか
この6つのlinkはクリックするたびに関数をトリガするからです.この関数の役割は現在のi値を印刷し、6つのlinkタグを追加した後、メモリのi値はすでに6になりました.したがって、どのlinkをクリックしても、6がイジェクトされます.
どのlinkをクリックしても、対応する数字がポップアップされますが、どうやって解決しますか?解決方法はjavascriptの閉鎖特性です.
 
クローズド---------------------------------------------------------------------------------------------
クローズドについては、以下のURLをご覧ください.
http://www.jb51.net/article/24101.htm
関数aの内部関数bが関数a以外の変数Cによって参照されると、クローズドパケットが作成されるということです.クローズドの役割は、aが実行されてから戻った後、Javascriptのゴミ回収メカニズムGCはaによって占有された資源を回収しないようにします.aの内部関数bの実行はaの変数に依存する必要があります.例は以下の通りです
function a(name) 

{ 

   var num=0;

   function b() 

   { 

        alert("name:"+name+";num:"+num);

        num++;

   } 

   return b;

}

var c = a("c");

var d = a("d");

c();   //name:c;num:0

d();   //name:d;num:0

c();   //name:c;num:1

d();   //name:d;num:1
クローズド特性のため、aは常にメモリに存在しており、毎回c()またはd()、cとdに対応するaオブジェクトはnum++になります.この部分についてはドメインチェーンという概念があります.よく分からないのは自分で調べられます.
 
 例の修正----------------------------------------------------------------------------------------------------------------------------------------------------
したがって、上記の例については、次のように修正することができます.
<html>

<head>

    <title>elementFromPoint</title>

    <script type="text/javascript">

        window.onload = function(){  

        for(var i=0; i<6; i++){  

            var alink = document.createElement('a');  

            var titleText = document.createTextNode(' ' + (i+1) + ' ');  

            alink.appendChild(titleText);  

            alink.href = "javascript:void(0)";  

            alink.onclick= showI(i);

            var div = document.getElementById('show-detail');         

            div.appendChild(alink);  

        }  

    }  



      function showI(i)

      {

          var num=0;

          var a= function(){alert("i:"+i+";num:"+num++);}

          return a;

      }

    </script>

</head>

<body>



<div id="show-detail">   </div> 

</body>

</html>
修正後に見られます.各linkをクリックして、対応する番号をポップアップできます.
alink.onclick=showI(i)  alink.onclickは関数showIの内部オブジェクトaを指すため、showIオブジェクトはGCに回収されず、各alinkはショーIオブジェクトに対応しています.alinkをクリックすると、それぞれの対応するshowIオブジェクトをトリガします.コードには6つのalinkが生成されていますが、これら6つのalinkにはそれぞれ6つの「クローズド関数」showI(i)が割り当てられています.各クローズド関数には、alinkに対応する番号iが格納されています.クローズド特性のため、この6つのshowIオブジェクトはリリースされず、メモリに一致して保存されますので、6つのlinkはそれぞれクリックすると、該当する番号が表示されます.
function showI(i){    var num=0; //ここにnumを一つ追加します.各linkをクリックするとnum++は相互に影響しないということです.    var a=function(){alert("i:"+i+";num:"+num+);]    return a;
 
 
 
本論文の例は以下のとおりである http://blog.csdn.net/xiaohai0504/article/details/7735971
AS.NET SignalR Troubeshoting