ホームページ > 記事 > ウェブフロントエンド > jsクロージャの用途は何ですか? jsクロージャの使用例（コード付き）

jsクロージャの用途は何ですか? jsクロージャの使用例（コード付き）

不言オリジナル: 2018-08-23 11:38:341419ブラウズ

この記事では、js クロージャの用途について説明します。 js クロージャーの使用例 (コード付き) は、必要な友人が参考にできることを願っています。

Js言語は関数内でグローバル変数を直接読み取ることができますが、関数内のローカル変数を関数外で読み取ることはできません

<script type="text/javascript">
var n=100;
function parent(){
  alert(n);
}
parent();//100
</script>

<script type="text/javascript">
function parent(){
  var m=50;
}
parent();
alert(m);//报错 m未定义
</script>

注: 関数内で変数を宣言する場合は必ずvarを追加してください。そうしないとグローバル変数が宣言されます。。

function parent(){

m=50;

}

parent();

alert(m);//50

場合によっては、関数内でローカル変数を取得する必要がある場合、関数内にサブ関数を定義するなど、js 変数スコープの特性を柔軟に使用する必要があります。親関数はそのグローバルであり、サブ関数はグローバル変数です。関数は親関数内の変数 (js コード全体のローカル変数) にアクセスできます

<script type="text/javascript">
function parent(){
   var m=50;
   function son(){
        alert(m);
   }
   return son;
}
var s=parent();//将结果保存在全局里
s();//50
</script>

親内のすべてのローカル変数はその関数に表示されます。子関数ですが、その子関数内のローカル変数は親から見えます。これは、js の独自のチェーンスコープ構造です。子オブジェクトは、すべての親オブジェクトの変数をレベルごとに検索します。親オブジェクトの変数は子オブジェクトから見えますが、その逆は成り立ちません !上記の息子関数はクロージャです。

クロージャー: 関数の内部に関数を定義し、関数の内部と外部を接続するブリッジを作成します。クロージャーには 2 つの関数があります:

1 つは、前述した関数内の変数を読み取ることです。データ共有を実現するためにこれらの変数の値をメモリに保存することです
以下はクロージャのいくつかの例です

<script type="text/javascript">
var cnt=(function(){
    var i=0;
    return function(){
        alert(i);
        i++;
    }
})();
cnt();//0
cnt();//1
cnt();//2
cnt();//3

匿名関数の実行結果を入れます。関数（つまり、内部のサブルーチン関数の宣言はグローバル変数cutに割り当てられます）、iはメモリに保存されます。cut()が実行されると、値はiによってのみ呼び出すことができます。 cnt() 関数、および直接alert(i) は機能しません。

2. パラメータをクロージャに渡します:

var cnt=(function(num){
return function(){
    alert(num);
    num++;
  }
})(5);
cnt();//5
cnt();//6
cnt();//7
//当然还可以调用时传参
var cnt=(function(){
    var i=0;
return function(num){
    num+=i;
    alert(num);
    i++;
  }
})();
cnt(1);//1
cnt(2);//3
cnt(3);//5

jsクロージャの用途は何ですか? jsクロージャの使用例（コード付き）

関連記事