Born Neet

このブログを始めてまだ1週間ちょっとしか経ってないのに、3日も空けてしまうとは…

別に何をやってたってわけでもないんですが、強いて言えば、JavaScriptの勉強してました。
で、記事のタイトル通りクロージャでつまづきまくってます。

クロージャとは…ってのは、googleやyahoo、参考記事に任せるとして、とりあえず、一人前のJavaScripterになるためには超えなきゃならない壁なわけです。

何でいきなり勉強しようと思ったかというと、この記事（JavaScript とクロージャ - bkブログ）が面白かったからです。
（別にclosureという響きが引きこもりっぽくて気に入ったわけではないですよ。）
入門書とかでサンプルを見たことはあったんですが、どう便利なのかイメージできなかったので…（応用力・想像力が足りない僕のせいですが）

せっかくなので勉強用に作ったスクリプトを張ってみます。
僕と同じく動いてるものを見ないとよくわからんって人もいると思うので。（まぁ僕もまだよくわかってないんですが…）

ちょっと長いので、続きに入れます。

興味ある人はどうぞ。

[ここから続き]

これがサンプルです。

カウントダウン1、2を適当にクリックしてみてください。

カウントダウン1 カウントダウン2


実はこの2つのリンクには、全く同じ関数を設定してあります。

ソース

<script type="text/javascript">
function bnCounter() {
 var count = 10;
 return function() { document.getElementById("bnConsole").value += count-- + " ";
  if(count < 0) count = 10;
 }
}
document.getElementById("bnLink1").onclick = bnCounter();
document.getElementById("bnLink2").onclick = bnCounter();
</script>

にもかかわらず、クリックすると、それぞれが独立してカウントダウンを行っています。
こういうことをグローバル変数を使わず実現できるのが、クロージャのすごさです。

とりあえず僕が理解できている（と思っている）のはここまでです。


以下は蛇足です。（Skip To 参考記事） 

上の例だと厳密には関数名でグローバル変数を1つ使っちゃってますね…

ってことはこうすればいいのかな？

document.getElementById("bnLink1").onclick = (function() {
 var count = 10;
 return function() { document.getElementById("bnConsole").value += count-- + " ";
  if(count < 0) count = 10;
 }
})();
document.getElementById("bnLink2").onclick = (function() {
 var count = 10;
 return function() { document.getElementById("bnConsole").value += count-- + " ";
  if(count < 0) count = 10;
 }
})();

でもこれは、同じコード二回書いてるからよけい無駄な気がする。

こうか？

for(var i = 1; i < 3; i++) {
 document.getElementById("bnLink" + i).onclick = (function() {
  var count = 10;
  return function() { document.getElementById("bnConsole").value += count-- + " ";
   if(count < 0) count = 10;
  }
 })();
}

いや、これだとパフォーマンスに影響が出て本末転倒か。


話題が逸れて来たところで、今日は終わっておきます。

とりあえず、これからも頑張って勉強していきます…。


参考記事
（理解できたものだけではないです。僕が意味を取り違えている可能性は大いにあります。元記事に責任はありませんのであしからず。）

JavaScript とクロージャ - bkブログ
指向性メモ::2005-07-24::クロージャとOOPとJavaScriptの謎仕様
Effective JavaScript - Dynamic Scripting(http://www.interq.or.jp/student/exeal/dss/ejs/)
…サイトがなくなってたので、Internet Archiveを参照しました。
JavaScriptな日々 | クロージャとは？
JavaScriptの巧い書き方 - Archiva

他、多数。


以上です。

こんな長くてしょーもない記事を最後まで読んでくれてありがとうございました。