クロージャ
ここ最近、クロージャやら、即時関数やらを多様するようになってきた。
が、初歩的なミスを犯してしまったので、戒めとしてメモ。
例)Aタグのマウスオーバー時の色の変更(スタイルシートでいいじゃないか・・は言わないで)
下記のようなコードがあったとしよう。
var anchors = document.getElementsByTagName('a'); for( var i = 0, len = anchors.length; i < len; i++ ){ var a = anchors[i]; a.onmouseover = function() { a.style.color = '#ff0000'; }; a.onmouseout = function() { a.style.color = '#000'; }; }
はい。これは問題なく動きます。
では、このコードを読み込み完了イベント内で書いてみると・・・
window.onload = function() { var anchors = document.getElementsByTagName('a'); for( var i = 0, len = anchors.length; i < len; i++ ){ var a = anchors[i]; a.onmouseover = function() { a.style.color = '#ff0000'; }; a.onmouseout = function() { a.style.color = '#000'; }; } }
はい。失敗します。
これは、変数aはforループ内で都度初期化されているので、結果、最後に解釈されたAタグがonload内のローカル変数aの値となってしまいます。
結果は、ページ内どこのAタグをマウスオーバーしても、ページ内最後のAタグのみ色が変更されてしまうことになります。
そこでクロージャの登場です!!
window.onload = function() { var anchors = document.getElementsByTagName('a'); for( var i = 0, len = anchors.length; i < len; i++ ){ var a = anchors[i]; ( function(e) { e.onmouseover = function() { e.style.color = '#ff0000'; }; e.onmouseout = function() { e.style.color = '#000'; }; })(a); } }
これで出来ました!!
何をしたかというと、forループ内に関数を作り、変数aをその関数内のローカル変数eへ渡してます。
このようにクロージャとは変数のスコープを切りたいときに利用したりできます。
JavaScriptを覚えるなら
![]() | 新品価格 |
![](http://www14.a8.net/0.gif?a8mat=1ZQW8W+BB8IK2+249K+BWGDT)
コメント
コメントはありません。