JS閉包は徹底的に理解されていますか?
12838 ワード
JS閉パッケージの概念と応用についてはここでは言わず、個人の理解について簡単なテストを行い、答えが正しい場合、そして何が起こっているのかを知っていれば、閉パッケージの原理の把握に差がないことを説明します.
問題を見てください.
上のコードをクリックしたときに何の値がポップアップするか答えてみましょう.
0,1だったら・・・それは間違っていました(最初は私も間違っていました^^)
正解は4.
何が原因ですか.自分でJS変数の役割ドメインをネットで検索してみるとわかります(実は私もはっきり言えませんが・・・)
ソリューション
実は解決する方法はいくつかあって、例えばドメインを隠して、私が言うのは閉鎖的な方法です
コードを見てください
コードを実行してみます.やっぱり正解でした.
なぜかというと、Googleはすぐに分かります.
もう一つ・・・
この例は他の人のを見ていますが、典型的に使っています^^
彼はこのキーワードの使い方についてよく見た.
結果は何だと思う?
答え:「The Window」
他のは言わないで、もし上の2つの例を理解することができるならば、閉じて応用して小さい牛刀を試すことができますハハ......
問題を見てください.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<script type="text/javascript">
function f1() {
var arr = document.getElementsByTagName("p");
for( var i=0; i<arr.length; i++ ) {
arr[i].onclick = function() {alert(i); }
}
}
</script>
</HEAD>
<body onload="f1();">
<p> 0</p>
<p> 1</p>
<p> 2</p>
<p> 3</p>
</body>
</HTML>上のコードをクリックしたときに何の値がポップアップするか答えてみましょう.
0,1だったら・・・それは間違っていました(最初は私も間違っていました^^)
正解は4.
何が原因ですか.自分でJS変数の役割ドメインをネットで検索してみるとわかります(実は私もはっきり言えませんが・・・)
ソリューション
実は解決する方法はいくつかあって、例えばドメインを隠して、私が言うのは閉鎖的な方法です
コードを見てください
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<script type="text/javascript">
function f1() {
var arr = document.getElementsByTagName("p");
for( var i=0; i<arr.length; i++ ) {
arr[i].onclick = (function(k){ return function(){ alert(k); } })(i); //
}
}
</script>
</HEAD>
<body onload="f1();">
<p> 0</p>
<p> 1</p>
<p> 2</p>
<p> 3</p>
</body>
</HTML>コードを実行してみます.やっぱり正解でした.
なぜかというと、Googleはすぐに分かります.
もう一つ・・・
この例は他の人のを見ていますが、典型的に使っています^^
彼はこのキーワードの使い方についてよく見た.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<script type="text/javascript">
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
return function(){
return this.name;
};
}
};
alert(object.getNameFunc()());
</script>
</HEAD>
<body >
</body>
</HTML>結果は何だと思う?
答え:「The Window」
他のは言わないで、もし上の2つの例を理解することができるならば、閉じて応用して小さい牛刀を試すことができますハハ......