JavaScript++かも日記: 【JavaScript】匿名関数で匿名スコープ&インスタンス

このページは[ 入門 Ajax ](ソフトバンククリエイティブ )と[ だれでもカンタンJavaScriptサンプル集 ](秀和システム)と
[ だれでもカンタンDynamicHTMLサンプル集 ](秀和システム)などの著者
でAllaboutのJavaScriptガイドとか牛久大仏の足元で草むしりをしながら
暮らしている【高橋登史朗】によるサポートページ兼無駄話ブログです

*このスクリプト動かないよ～、とかの情報は
各「コメント欄」へ書き込んでいただけるとうれしいです。
直せないかもしれないけどf^^;;;

2007年12月08日

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

【JavaScript 】

ブックマーク-- Hatena

/ Livedoor

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

匿名関数とはつぎのような名前のない関数を指します。

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が表示されます

【コメント】

AllaboutのJavaScript記事を連載させていただいてます。最近は、jQueryを主に取り上げていますが、多少なりとも参考になれば幸いです。

【広告】

視力回復手術は銀座スポーツクリニック
 アスリートが選ぶレーシックは、銀座スポーツクリニック

夏休みのかみさんとまりもの帰省用にちょっと調査中---
≪国内格安航空券≫出張・帰省・旅行に最適
 全国どこでも出発！国内格安航空券

2010年03月09日
日	月	火	水	木	金	土
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

2010年03月09日

日

月

火

水

木

金

土