ホームページ >ウェブフロントエンド >jsチュートリアル >jsクロージャの詳しい解説_基礎知識
クロージャは JavaScript 言語の難しさと特徴です。多くの高度なアプリケーションはクロージャに依存しています。
クロージャには 3 つの特徴があります:
1. 関数の入れ子関数
2. 外部パラメータと変数は関数
内で参照できます
3. パラメータと変数はガベージ コレクション メカニズムによってリサイクルされません
クロージャは、別の関数のスコープ内の変数にアクセスできる関数です。クロージャを作成する最も一般的な方法は、関数内に別の関数を作成し、他の関数
クロージャの使用には利点と欠点があります。つまり、ローカル変数はメモリ内に常駐し、グローバル変数の使用を回避できます。グローバル変数はすべてのモジュールで呼び出すことができますが、これは間違いなく悲惨な結果をもたらします。
したがって、プライベートなカプセル化されたローカル変数を使用することをお勧めします。
一般関数の実行後、ローカルのアクティブオブジェクトは破棄され、グローバルスコープのみがメモリに保存されます。しかし、閉店の場合は状況が異なります。
ネストされた関数のクローズ:
function aaa() { var a = 1; return function(){ alert(a++) }; } var fun = aaa(); fun();// 1 执行后 a++,,然后a还在~ fun();// 2 fun = null;//a被回收!!
上記の出力結果は 5 です。
クロージャは常に変数をメモリ内に保持するため、不適切に使用するとメモリ消費量が増加します。
(1) JavaScript では、オブジェクトが参照されなくなった場合、そのオブジェクトは GC によってリサイクルされます。 (2) 2 つのオブジェクトが相互に参照し、第三者によって参照されなくなった場合、相互に参照している 2 つのオブジェクトもリサイクルされます。
それでは、クロージャを使用する利点は何でしょうか?クロージャを使用する利点は次のとおりです:
1. 変数をメモリ内に長期間常駐させたい
2. グローバル変数の汚染を避ける
3.プライベートメンバーの存在
1. グローバル変数の蓄積
<script> var a = 1; function abc(){ a++; alert(a); } abc(); //2 abc(); //3 </script>
<script> function abc(){ var a = 1; a++; alert(a); } abc(); //2 abc(); //2 </script>
3. ローカル変数の蓄積 (クロージャでできること)
<script> function outer(){ var x=10; return function(){ //函数嵌套函数 x++; alert(x); } } var y = outer(); //外部函数赋给变量y; y(); //y函数调用一次,结果为11 y(); //y函数调用第二次,结果为12,实现了累加 </script>
js では、キーワード function を通じて関数を宣言できます:
<script> function abc(){ alert(123); } abc(); </script>
<script> (function (){ alert(123); })(); //然后通过()直接调用前面的表达式即可,因此函数可以不必写名字; </script>
<script> var abc = (function(){ //abc为外部匿名函数的返回值 var a = 1; return function(){ a++; alert(a); } })(); abc(); //2 ;调用一次abc函数,其实是调用里面内部函数的返回值 abc(); //3 </script>
<script> var aaa = (function(){ var a = 1; function bbb(){ a++; alert(a); } function ccc(){ a++; alert(a); } return { b:bbb, //json结构 c:ccc } })(); aaa.b(); //2 aaa.c() //3 </script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title></title> <script> window.onload = function(){ var aLi = document.getElementsByTagName('li'); for (var i=0;i<aLi.length;i++){ aLi[i].onclick = function(){ //当点击时for循环已经结束 alert(i); }; } } </script> </head> <body> <ul> <li>123</li> <li>456</li> <li>789</li> <li>010</li> </ul> </body> </html>7. クロージャーを使用して上記のコードを書き直します。