忍者ブログ

Home > > クロージャに苦戦中(JavaScript)

[PR]

  • 2017-05-30

Share on Tumblr このエントリーをはてなブックマークに追加

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

Comments:

Trackback+Pingback:

Listed below are links to weblogs that reference
[PR] from Born Neet
Trackback from Born Neet 2008-07-01 (火) 19:27

遅延ロードでJavaScriptのお勉強

※ 超長文注意! 動的スクリプトローディング(さんざん既出だと思うけど - IT戦記が、さっぱりわかんなくて凹んだ。 でも、いろいろとJSのエッセンスが詰まってそうな気がしたので、頑張って読んでみた。 で、一応わかったつもりにはなれたので説明してみる。 (駄文だけど僕と同じレベルの人にはもしかしたら役に立つかもしれません) 非常に長いですが、よろしければどうぞ。 では、早速始めます。 [引用] まずは、全体を引用。 (コピーしにくいように一応行番号を入れてま... (more…)

Home > > クロージャに苦戦中(JavaScript)

Home > JavaScript > クロージャに苦戦中(JavaScript)

クロージャに苦戦中(JavaScript)

Share on Tumblr このエントリーをはてなブックマークに追加

このブログを始めてまだ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

他、多数。


以上です。

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

Comments:0

Comment Form

Trackback+Pingback:1

TrackBack URL for this entry
Listed below are links to weblogs that reference
クロージャに苦戦中(JavaScript) from Born Neet
Trackback from Born Neet 2008-07-01 (火) 19:27

遅延ロードでJavaScriptのお勉強

※ 超長文注意! 動的スクリプトローディング(さんざん既出だと思うけど - IT戦記が、さっぱりわかんなくて凹んだ。 でも、いろいろとJSのエッセンスが詰まってそうな気がしたので、頑張って読んでみた。 で、一応わかったつもりにはなれたので説明してみる。 (駄文だけど僕と同じレベルの人にはもしかしたら役に立つかもしれません) 非常に長いですが、よろしければどうぞ。 では、早速始めます。 [引用] まずは、全体を引用。 (コピーしにくいように一応行番号を入れてま... (more…)

Home > JavaScript > クロージャに苦戦中(JavaScript)

Search
Loading
Feeds
Links
スポンサードリンク
Ad
デル株式会社
Ad

Page Top