jsクロージャ例まとめ_基礎知識

Js 閉鎖
閉鎖前に知っておくべきこと
1. 関数のスコープ
(1) Js 言語の特別な点は、グローバル変数を関数内で直接読み取ることができることです

コードをコピーします コードは次のとおりです:

var n=100;
関数parent(){
アラート(n);
}
parent();//100

php の場合

コードをコピーします コードは次のとおりです:

$n=100;
関数parent(){
echo $n;
}
parent();//n が未定義であるというエラーが報告されます
?>

(2). 関数内のローカル変数は関数の外で読み取ることはできません

コードをコピーします コードは次のとおりです:

関数parent(){
var m=50;
}
親();
alert(m);//エラー m が定義されていません

関数内で変数を宣言する場合は var を追加する必要があることに注意してください。追加しないとグローバル変数が宣言されます

コードをコピーします コードは次のとおりです:

関数parent(){
m=50;
}
親();
アラート(m);//50

//もちろん、これは php ではさらに当てはまります。

コードをコピーします コードは次のとおりです:

関数parent(){
global $m;//グローバル、定義と割り当ては分離する必要があります
$m=50;
}
親();
echo $m;//50
?>
//グローバルがない場合でも、未定義のエラーが報告されます

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

コードをコピーします コードは次のとおりです:

関数parent(){
var m=50;
関数son(){
アラート(m);
}
息子を返してください;
}
var s=parent();//結果をグローバル
に保存します s();//50

親内のすべてのローカル変数はその子関数に表示されますが、その子関数内のローカル変数はその親関数には表示されません。これは、子オブジェクトの独自のチェーン スコープ構造であり、親のすべての変数を検索します。オブジェクトを一度に 1 レベルずつ上に移動すると、親オブジェクトのすべての変数が子オブジェクトに表示されます。その逆は当てはまりません。上記の息子関数はクロージャです
こんな生徒もいるかも知れません

コードをコピーします コードは次のとおりです:

関数parent(){
var m=50;
関数son(){
アラート(m);
}
}
親();
son()//関数 Son が未定義であることを報告します

JavaScript では、関数内で宣言された関数はローカルであり、関数の実行が終了した後に解放されることに注意してください
this と php

の違いに注意してください

コードをコピーします コードは次のとおりです:

関数parent(){
関数son(){
$m=50;
echo $m;
}
}
親();
son();//50 を出力するとエラーは報告されません
?>

閉店

関数の内部に関数を定義し、関数の内部と外部をつなぐブリッジを定義します
クロージャーには 2 つの機能があります:
1 つは、前述した関数内の変数の読み取りです
2 つ目は、これらの変数の値をメモリに保存してデータ共有を実現することです
以下にクロージャーの例をいくつか示します

コードをコピーします コードは次のとおりです:

var cnt=(関数(){
var i=0;
戻り関数(){
アラート(i);
私;
}
})();
cnt();//0
cnt();//1
cnt();//2
cnt();//3

無名関数の実行結果(つまり、内部のサブ関数の宣言がグローバル変数cutに代入される)、iがメモリに保存されます
Cut() を実行する場合、値はメモリから直接取得されます。 i は cnt() 関数によってのみ呼び出すことができ、直接のalert(i) は機能しません
パラメータをクロージャ

に渡すこともできます。

コードをコピーします コードは次のとおりです:

var cnt=(関数(数値){
return function(){
アラート(番号);
番号 ;
}
})(5);
cnt();//5
cnt();//6
cnt();//7
//もちろん、呼び出し時にパラメータを渡すこともできます
var cnt=(関数(){
var i=0;
戻り関数(数値){
num =i;
アラート(番号);
私;
}
})();
cnt(1);//1
cnt(2);//3
cnt(3);//5

クロージャをより深く理解するために、次のコードを見てみましょう
たとえば、配列を返したいとします。配列には 5 つの関数があり、最初の関数は 0 をポップアップし、2 番目の関数は 1 をポップアップします。
コードをこのように書くと

コードをコピーします コードは次のとおりです:

関数ボックス(){
var arr=[];
for(i=0;i arr=function(){return i;}
}
戻り値
}
var a=box();
alert(a);//5 つの関数本体を含む配列
アラート(a[0]());
アラート(a[1]());

ポップアップ関数本体
function(){return i;} }
最後の i は 4 で、次は 5 になります
for ループ停止
すべてのケースで 5 個のポップアップが表示されることがわかりました。これは明らかに要件を満たしていません

解決策 1
内部の関数の自己即時実行

コードをコピーします コードは次のとおりです:

関数ボックス(){
var arr=[];
for(i=0;i arr=(function(num){return i;})(i);
}
戻り値
}
var a=box();
for(var i=0;i アラート(a);
}

しかし、返された配列の要素は関数の実行結果であることがわかりました。しかし、私たちが望んでいるのは、関数がコードをアップグレードする必要があるということです

解決策 2
クロージャの実装

コードをコピーします コードは次のとおりです:

関数ボックス(){
var arr=[];
for(var i=0;i

arr=(関数(数値){
戻り関数(){戻り値;}
})(i);

}
戻ります;
}

var arr=box();

for(var i=0;i

alert(arr());//0,1,2,3,4
}

キーコード

コードをコピー コードは次のとおりです:

arr=(関数(数値){
return function(){return num;}
})(i);

i=0のとき
arr[0]=(function(num){return function(){return num;}})(0);

1時

arr[1]=(関数(数値){戻り値関数(){戻り値;}})(1);

以上が閉店のメリットです！とてもシンプルで実用的です。