ホームページ > 記事 > ウェブフロントエンド > jsクロージャの詳しい解説_基礎知識

jsクロージャの詳しい解説_基礎知識

WBOYオリジナル: 2016-05-16 16:37:571716ブラウズ

クロージャは 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 です。クロージャは常に変数をメモリ内に保持するため、不適切に使用するとメモリ消費量が増加します。

JavaScript のガベージコレクション原理

(1) JavaScript では、オブジェクトが参照されなくなった場合、そのオブジェクトは GC によってリサイクルされます。 (2) 2 つのオブジェクトが相互に参照し、第三者によって参照されなくなった場合、相互に参照している 2 つのオブジェクトもリサイクルされます。

それでは、クロージャを使用する利点は何でしょうか?クロージャを使用する利点は次のとおりです:

1. 変数をメモリ内に長期間常駐させたい

2. グローバル変数の汚染を避ける

3.プライベートメンバーの存在
1. グローバル変数の蓄積

2. ローカル変数

<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>

では、変数 a をローカル変数と累積変数の両方にするにはどうすればよいでしょうか?

3. ローカル変数の蓄積 (クロージャでできること)

<script>
function outer(){
    var x=10;
    return function(){       //函数嵌套函数
        x++;
        alert(x);
    }
}
var y = outer();       //外部函数赋给变量y;
y();         //y函数调用一次，结果为11
y();        //y函数调用第二次，结果为12，实现了累加
</script>

js での関数宣言と関数式:

js では、キーワード function を通じて関数を宣言できます:

<script>
function abc(){
    alert(123);
}
abc();
</script>

このステートメントを「()」を使用して式に変換することもできます:

<script>
(function (){
    alert(123);
})();          //然后通过()直接调用前面的表达式即可，因此函数可以不必写名字；
</script>

4. グローバル変数の汚染を軽減するモジュール式コード

<script>
var abc = (function(){   //abc为外部匿名函数的返回值
    var a = 1;
    return function(){
        a++;
        alert(a);
    }
})();
abc();  //2 ；调用一次abc函数，其实是调用里面内部函数的返回值  
abc();  //3
</script>

5.プライベートメンバーの存在

<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>

6. ループ内の対応する要素のインデックスを直接検索します

  <!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. クロージャーを使用して上記のコードを書き直します。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：IndexOf と lastIndexOf の使用例導入_JavaScript スキル次の記事：IndexOf と lastIndexOf の使用例導入_JavaScript スキル

続きを見る

jsクロージャの詳しい解説_基礎知識

関連記事