JavaScriptクロージャー：
クロージャは、グローバル変数がページ全体で変更される可能性があるという問題を解決しますが、クロージャは、ローカル変数もページ全体にアクセスできるため理解できます。
例は次のとおりです：（カウンターコード）
コードは次のとおりです。
<html>
<head>
<meta charset = "utf-8">
<script>
//全局变量
var num = 0;
function add(){
return num += 1；
}
function MyFunction(){
document.getElementById("show").innerHTML = add();
}
</script>
</head>
<body>
<p id = "show">0</p>
<input type = "button value = "点我" onclick = "MyFunction()" />
</body>
</html>
グローバル変数は変更されますが、それはグローバル変数であるため、他のメソッドもnum変数を変更できるため、このメソッドは安全ではありませんが、ローカル変数に変換されると、カウントに達しません目的。
コードは次のとおりです。
<html>
<head>
<meta charset = "utf-8">
<script>
function add(){
//局部变量
var num = 0;
return num += 1；
}
function MyFunction(){
document.getElementById("show").innerHTML = add();
}
</script>
</head>
<body>
<p id = "show">0</p>
<input type = "button value = "点我" onclick = "MyFunction()" />
</body>
</html>
クロージャーを使用すると、上記の問題を解決できます
コードは次のとおりです。
<html>
<head>
<meta charset = "utf-8">
<script>
var add = （function（）{
//局部变量
var num = 0;
return function(){ return num += 1；}
}）()；
function MyFunction(){
document.getElementById("show").innerHTML = add();
}
</script>
</head>
<body>
<p id = "show">0</p>
<input type = "button value = "点我" onclick = "MyFunction()" />
</body>
</html>
クロージャーの理解：
コード：
var add = （function（）{
//局部变量
var num = 0;
return function(){ return num += 1；}
}）()；
上記のコードが関数add（）{...}を直接記述していないのに、関数addに関数を割り当てているのはなぜですか？
通常、add（）へのすべての呼び出しは、add（）のコードブロックを再び通過すると想定しますが、そうではありません。
addメソッドの戻り値に注意してください。1、2、3の値ではなく、メソッドを返し、このメソッドをadd変数に割り当てます。
したがって、この関数が1回実行された後、実際に追加する最後の割り当ては、戻りカウンター+ = 1のコードです。
したがって、add（）を呼び出すたびに、実際にはreturn counter + = 1が呼び出されます。
前述の記事と組み合わせると、クロージャーは親メソッドのローカル変数を保持し、親メソッドが破棄されるときに破棄されないため、このカウンターは最初の関数が実行されたときに作成された変数から実際に取得されます。
次のように理解することもできます。
クロージャは別の関数の変数を参照する関数です。変数が参照されるため、再利用されないため、プライベート変数のカプセル化に使用できます。これは長所と短所の両方であり、不要なクロージャはメモリ消費を増やすだけです。
言い換えれば、クロージャは、子関数が親関数のローカル変数と親関数のパラメータを使用できることです。
