JavaScriptのクローズドと循環バインディングイベントの実現

4531 ワード

JavaScript javascriptは閉じます jsスコープ jsクローズドループバインディングを実現

一、JavaScript作用領域:
JavaScript変数は実際には二つの作用領域、大域変数と関数の内部変数しかありません.関数内部の任意の場所で定義された変数(var scope)は、その作用領域は関数全体である.グローバル変数:windowオブジェクトのオブジェクト属性を指します.スコープ区分:ブロックによって区別されるのではなく、コンテキストに基づいて関数で分割される.2点を強調します.1.同じスコープでは、JavaScriptは変数の繰り返し定義を許可し、次の定義は前の定義をカバーします.2.関数内部でキーワードvarを追加しないと定義される変数は、デフォルトはグローバル変数です.

var scope="global";
function t(){
    console.log(scope); //"global"
    scope="local"
    console.log(scope); //"local"
}
t();
console.log(scope); //"local"

 
  
  
  
 var scope="global";
function t(){
    console.log(scope); //"undefined"
    var scope="local"
    console.log(scope); //"local"
}
t();
console.log(scope); //"global"
変数解析中にまず局所的な作用領域を検索し,その後上位の作用領域を検索した.第一セグメントコードの関数に変数scopeが定義されていないので、上位ロールフィールド(グローバルスコープ)を検索して、その値を出力します.しかし、第二のセグメントコードの関数内で変数scopeが定義されており(consolieの後でも前でも変数が定義されていても、このスコープは変数scopeを持っていると考えられている)、したがって、上部の作用領域を検索せずにscopeを直接出力する.しかし、残念なことに、この時の局所変数iは割り当てられていないので、出力はundefinedです.//            ，              ：
var scope="global";
function t(){
    var scope;
    console.log(scope);
    scope="local"
    console.log(scope);
}
t();
関数の作用領域の特性のために、局所変数は関数全体にわたって常に定義されています.変数宣言を事前に関数の上部に進めることができます.var b;  // 1 
function fun(){ 
	b = "change"; 
} 
alert(b);//  undefined，   1       


var b;  // 1 
function fun(){ 
	b = "change"; 
}
fun(); //      
alert(b); //  change
varを使用して変数を宣言すると、作成されたこの属性は設定できません.つまりdelete演算子では削除できません.
二、スコープの例:<html>
<head>
	<script type="text/javascript">
		function buttonInit(){
			for(var i=1;i<4;i++){
				var b=document.getElementById("button"+i);
				b.addEventListener("click"，function(){ alert("Button"+i);}，false);
			}
		}
		window.onload=buttonInit;
	</script>
</head>
<body>
	<button id="button1">Button1</button>
	<button id="button2">Button2</button>
	<button id="button3">Button3</button>
</body>
</html>
イベントを登録した後、iの値は4で、ボタンをクリックすると、イベント関数すなわちfunction(){Button}}という匿名関数にはiがありません.作用ドメインチェーンによって、buttonInit関数で探すと、iの値は4になります.
三、javaScriptは閉鎖します.
jsでは、クローズドバッグは主にjsの他のいくつかの特性に関連しています.回収メカニズム、関数の入れ子など.1.作用ドメインチェーン:簡単に言えば、作用ドメインチェーンとは、関数が定義された時に作成された、使用した変数の値を探すためのインデックスのことです.彼の内部のルールは、関数自体のローカル変数を一番前に置いて、自身の親レベル関数の変数を次に置いて、もう一つのレベルの高い関数の変数をさらに上に置くことです.後に、この類推でグローバルオブジェクトまで.関数で変数の値を調べる必要がある場合、jsインタプリタはドメインチェーンを使って検索します.一番前のローカル変数から先に探します.対応する変数が見つからない場合は、次のレベルのチェーンに行って変数を見つけたら続きません.最後に必要な変数が見つからなかったら、説明します.器はundefinedに戻ります.2.Javascriptのゴミ回収メカニズム:Javascriptにおいて、一つのオブジェクトがもう引用されないと、このオブジェクトはGCによって回収されます.2つのオブジェクトが相互に参照されて、第三者に引用されなくなると、この2つの相互参照の対象も回収されます.関数aはbによって参照されます.bはa以外のcに引用されます.これはなぜa関数を持っていますか?行を行った後、回収されない理由です.クローズドバックを構築すると、これらの変数はメモリ回収器に回収されなくなります.内部の関数が呼び出されないと、このクローズドは破棄されます.また、次のメモリに参照される変数がないと回収されます.3.クローズドがあり、入れ子の関数構造が作動します.
四、jsのクローズドを利用して循環バインディングイベントを実現する:<!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" >
<head>
	<title>  </title>
</head>
<body>
	<ul id="list">
		<li> 1   </li>
		<li> 2   </li>
		<li> 3   </li>
		<li> 4   </li>
		<li> 5   </li>
		<li> 6   </li>
	</ul>
	<script type="text/javascript">
		function tt(nob) {
			this.clickFunc = function() {
				alert("   " + (nob + 1) + "  ");
			}
		}
		var list_obj = document.getElementById("list").getElementsByTagName("li"); //  list     li     
		for (var i = 0; i<= list_obj.length; i++){
			console.log(list_obj[i])
			list_obj[i].onmousemove = function(){
				this.style.backgroundColor = "#cdcdcd";
			}
			list_obj[i].onmouseout = function() {
				this.style.backgroundColor = "#FFFFFF";
			}
			//list_obj[i].onclick = function() {
			//	alert("   " + i + "  "); //       alert     ：“   6  ”
			//}
			var col = new tt(i); //  tt  
			list_obj[i].onclick = col.clickFunc; //  clickFunc  
		}
	</script>
</body>
</html>

JavaScriptにおける原型対象の徹底的な理解(徹底的に説明していますので、注意深く読まなければなりません)