Ajaxで今よみがえる(^^;;-->[クロスブラウザ技術 ]DHTMLサンプル集
古籏一浩さんとのはじめての共著 発売中-->『Ajax実践テクニック』 古籏一浩/高橋 登史朗 (著)秀和システム
配本予約開始-->『入門Ajax 増補改訂版 』 高橋 登史朗 (著)ソフトバンククリエイティブ ; ISBN: 4797336242
-- リスト --
【カテゴリー】 ActionScript ( 6 ) AIR ( 2 ) AjaSQL ( 10 ) Ajax ( 575 ) Arax ( 1 ) canvas ( 10 ) CSS ( 11 ) ( 5 ) DLNA ( 1 ) Dojo ( 17 ) DOM ( 45 ) ES4 ( 4 ) Ext JS ( 2 ) 反重力物質 ( 1 ) ffAdd-on ( 1 ) Flash ( 46 ) Flash Remoting ( 11 ) FTP ( 2 ) GAF ( 9 ) Google Maps ( 119 ) GPS ( 42 ) HTTPヘッダサンプル ( 9 ) Internet ( 1 ) iPhone ( 31 ) IPv6 ( 1 ) 漫画 ( 1 ) Java ( 45 ) JavaScript ( 265 ) jKamo ( 8 ) jQchart ( 2 ) jQuery ( 111 ) jquery-ref ( 1 ) jsGadget ( 19 ) jslb_ ( 3 ) jslb_ajax ( 9 ) JSON ( 47 ) JSR223 ( 7 ) kjscmd ( 1 ) KNOPPIX ( 1 ) Linux ( 16 ) Mac ( 8 ) Memo ( 3 ) Microformats ( 2 ) Mini AJAX ( 2 ) MochiKit ( 2 ) mootools ( 3 ) Movable Type ( 57 ) MySQL ( 10 ) NewGameWeb ( 2 ) Nucleus ( 8 ) OpenAJAX ( 3 ) OpenDocument ( 1 ) OS ( 7 ) P2P ( 2 ) Perl ( 7 ) PHP ( 37 ) PostGIS ( 1 ) PostgreSQL ( 4 ) prototype.js ( 22 ) ROBOT ( 1 ) RSSリーダー ( 14 ) Ruby on Rails ( 7 ) Spry ( 6 ) SQLite ( 16 ) SQLiteWorker ( 2 ) ssh ( 1 ) SSI ( 2 ) SVG ( 15 ) TRON ( 1 ) Video ( 1 ) VML ( 1 ) Web Slice ( 1 ) Webサービス ( 98 ) widget ( 6 ) Wii ( 1 ) Wiki ( 1 ) Win ( 6 ) WSH ( 1 ) X01HT ( 29 ) XML ( 30 ) XOOPS ( 1 ) XQuery ( 2 ) XUL ( 4 ) Yahoo! UI ( 64 ) 日付入力用カレンダー ( 1 ) 『Ajax実践テクニック』 ( 1 ) 『入門 Ajax』 ( 42 ) WinTips ( 2 ) こりゃすごい ( 3 ) チューニング ( 22 ) ダイナミックロード関数 ( 7 ) リファレンス ( 18 ) ライブラリ ( 114 ) レーダー雨量表示 ( 1 ) ハード ( 23 ) ペンギン ( 2 ) ブラウザ ( 73 ) ブログでBBS ( 1 ) アクセスグラフ ( 3 ) イベント ( 2 ) カレンダーによる日付入力スクリプト ( 4 ) クロスブラウザ ( 11 ) クロスブラウザ関数 ( 7 ) スマートフォン ( 8 ) セキュリティ ( 114 ) ソフトイーサ ( 1 ) マッシュアップ ( 23 ) 暗号 ( 4 ) 映画 ( 47 ) 河川の水位グラフ ( 3 ) 回線 ( 2 ) 開発ツール ( 26 ) 牛久大仏 ( 9 ) 携帯 ( 138 ) 言語 ( 18 ) 故障 ( 3 ) 洪水警報システム ( 2 ) 今日のひと言 ( 5 ) 仕様 ( 60 ) 雑談 ( 232 ) 実装 ( 1 ) 書籍 ( 17 ) 親子ウインドウ有無の確認関数 ( 3 ) 新海誠 ( 3 )
【info】有料サポート(ベータ)限定 承り中 多忙につき、一時、新規受付停止 閉店中 /【JSサポート(仮称)】 

【info】いつもいろいろなテストなどをページ内のあちこちでやっているので、重かったり、壊れていたりするf^^;ことも多いです。実験用ですので、カオス(混沌)をあえて意図したりもしますので、標準やValidとは無縁だったりしますが、何卒、ご了承ください ( _ _ b

2007年12月08日

【JavaScript】匿名関数で匿名スコープ&インスタンス

JavaScript ブックマークに追加する ブックマーク-- Buzzurl  / Hatena  / Livedoor track feed


最近は、もう、あえて書くほどのことはないくらい目にするようになりましたが、前エントリで出てきたのでメモしておきます。

匿名関数とはつぎのような名前のない関数を指します。
function (){
    //ここにスクリプト
}
これは、オブジェクトのメソッドを作る時や、使い捨ての機能を引数で与える時などいろいろな使い方ができます。この匿名関数も、名前のある関数と同様に、関数内で宣言した変数や関数のスコープはローカルですので、そこで宣言した変数や関数はグローバル領域を汚染しません。

また、匿名関数内で宣言実行された関数hogehogeや変数x,yへは、関数外からも直接はアクセスすることができないわけで、名前の衝突や意図せず書き換えられてしまう心配がないわけです。

そこで、 下記のように (匿名関数)() と書き、その場でこの関数を実行してしまうことで、まるで、withで囲んだかのようでいて、匿名のローカルスコープ内でコードが遅延なく実行されるという仕掛けを作ることができます。
<script>

(function (){

   var x = 2,  
       y = 1

   function hogehoge (x,y){
        return x+y
   }
  
   alert(hogehoge(x,y)) //3
  
})()

alert(hogehoge(3,4)) //hogehoge is not defined

</script>
このページのように、いろいろなスクリプトが混在しそうな(恐ろしい)場所では、こんな風に「(function (){」 と 「})()」で囲む、という作業だけなので、手軽にローカルスコープを実現する手段として優れているかな?と。

それを、次のようにnewして変数に代入することで名前を与えて新しいインスタンスを作ることもできます。

そして、普通のコンストラクタと同様に、アクセスしたいものだけをthisキーワードをつけて書くことで、インスタンスのメソッドやプロパティとして利用するわけです。
<script>
var myIns= new (function (){

  var x = 2,  
       y = 1

  this.hogehoge = function  (x,y){
        return x+y
  }
  
  alert(this.hogehoge(x,y)) //3
  
})()

alert(myIns.hogehoge(3,4)) //7

</script>
こんな定型化もありうり?
<script><!--
(function (){

  //ここにスクリプト

})()
//--></script>


参考: 12.2 変数文 (Variable statement)

関数内部で変数文が発生するならば、その変数は、セクション 10.1.3 にあるように、その関数内の関数ローカルスコープで定義される。
(高橋注: ただし、varを使わずに発生した変数文はグローバル↓になってしまうので要注意)

function (){
    var a=1, //ローカル
        b=1 //ローカル(カンマでつないでいるので)
        c=1 //グローバル(var を使っていないので) 

   function d(){ /* ....  */ }  //ローカル
   var e=function (){ /* ....  */ }  //ローカル
   f=function (){ /* ....  */ }  //グローバル
                            //  (var を使っていないので) 
}


追記:20071221
もうひとつ書くのを忘れていましたf^^;。匿名コンストラクタを即newしてインスタンス作成することで作るシンプルなローカルスコープです。これは、匿名インスタンスの中に閉じ込められます。
var a=0;
new function (){
    var a=1;
} ;

alert(a); // 0が表示されます