JavaScriptにおけるクローズド概念及び応用分析

11967 ワード

「あなたが知らないjavaScript」では、クローズドの定義:クローズドとは、別の関数のスコープにアクセスする権限を持つ変数の関数です.
あらかじめ環境を定義しておくと、式の各自由変数にバインディング値が得られ、オープン表現は閉じた式になり、クローズドパッケージが構築されます.さらに、クローズド=関数+は、関数内の自由変数ごとにバインディング値を得る環境を作る.
関数は自由変数を含む関数であり、環境はすべての自由変数が結合値を得る環境である.
したがって、クローズドとは、関数とその周囲の状態(語法環境)に対する参照が結びつけられているということです.
function fout(){
const a=1;
function fin(){
Console.log(a);
}
return fin;
})()()
//1.
ここでfin関数は外部fout関数の変数にアクセスできます.ここではクローズドパッケージを構成しています.最後の出力は1です.訪問された関数fout()はクローズド関数です.
 function fout(){
				let a=1;
				function fin(){
					console.log(a++)
				}
				return fin;
			}
			const fa = fout();
			const fb = fout();
			fa();
			fb();
			fa();
			fb();
		//  1 1 2 2
ここも上と同じ理屈です.ここでfout()もクローズド関数です.
まとめ:1.関数とその周囲の状態(語法環境)に対する参照が縛られています.2.つまり、内部関数から外部関数のスコープにアクセスすることができます.3.JavaScriptでは、関数が作成されるたびに、関数が生成されるときに、クローズドが生成されます.
クローズドの主な役割:変数の役割範囲を拡張します.
クローズドの欠点:メモリが無駄になり、メモリが漏れてしまいます.
クローズドケースをクリックしてliのインデックス(1)を取得し、動的に属性を追加します.
<body>
		<div>
			<ul class="nav">
				<li>  </li>
				<li>  </li>
				<li>  </li>
			</ul>
		</div>
	 <!--         	 -->
		<script>
			var lis = document.querySelector(".nav").querySelectorAll('li');
			for(var i=0;i<lis.length;i++){
				lis[i].index = i;
				lis[i].onclick = function(){
					console.log(this.index);
				}
			}
		</script>
	</body>
(2)クローズド方式
<body>
		<div>
			<ul class="nav">
				<li>  </li>
				<li>  </li>
				<li>  </li>
			</ul>
		</div>
	 <!--       	 -->
		<script>
			var lis = document.querySelector(".nav").querySelectorAll('li');
			for(var i=0;i<lis.length;i++){
				//   for          
				(function(i){
					lis[i].onclick = function(){
						console.log(i);
					}
				})(i)
			}			
		</script>
	</body>
以上は闭锁の一つの概念と応用です.やっとブログを書いてみました.第一歩を踏み出しました.寝返りを打ってほしいです