スコープチェーン

3328 ワード

スコープチェーン「javascript DOM高級プログラム設計」P 35ページ

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>     </title>
<script type="text/javascript" src="ADS-start.js"></script>
<script type="text/javascript">
function initAnchors(){
	for(var i=1;i<=3;i++){
		var anchor = document.getElementById('anchor'+i);
		ADS.addEvent(anchor,'click',function(){
				alert('my id is anchor '+i);
			});
	}	
}

ADS.addEvent(window,'load',initAnchors);
</script>
</head>

<body>
<ul>
	<li><a href="" id="anchor1">anchor1</a></li>
	<li><a href="" id="anchor2">anchor2</a></li>
	<li><a href="" id="anchor3">anchor3</a></li>
</ul>

</body>
</html>

クリックしたら'my id is ancher 4'が出ます。

私達が欲しい結果は、私達が何番目をクリックして現れたのが関連数字です。「my id is ancher 1」はなぜですか？いいえの値は実際にはクリックイベントが発生した時に、スコープから取得されますので、クリックイベントが発生した時に、init Anchols()が実行されましたので、iの値は4に等しいので、alertごとに同じ情報が表示されます。具体的には、clickイベントリスニング器が呼び出され、その内部作用領域でiの値を検索すると、その結果は見つけられなかった。なぜなら、iの値は、clickイベントリスタを作用する匿名関数において定義されていないからである。
正しい結果を得るためには、イベントリスタの登録を独立した関数に転送し、その関数のパラメータを介して適切な値を伝達する必要があります。

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>     </title>
<script type="text/javascript" src="ADS-start.js"></script>
<script type="text/javascript">
function registerListener(anchor,i){
	ADS.addEvent(anchor,'click',function(){	
			
			alert('my id is anchor '+i);
		});	
}

function initAnchors(){
	for(var i=1;i<=3;i++){
		var anchor = document.getElementById('anchor'+i);
		
		registerListener(anchor,i);
	}	
}

ADS.addEvent(window,'load',initAnchors);
</script>
</head>

<body>
<ul>
	<li><a href="" id="anchor1">anchor1</a></li>
	<li><a href="" id="anchor2">anchor2</a></li>
	<li><a href="" id="anchor3">anchor3</a></li>
</ul>

</body>
</html>

作用するドメインチェーンに追加の関数と変数が定義されているので、ヒント情報には正しい値が維持されています。click事件リスニング器は現在の外部使用域になりましたので

registerListener()  ，         （    registerListener()              ，           ）         i        。

HU 1002

AcWing 791.高精度加算