[JavaScript]即時関数の呼び出しが,なぜ「(function(){…})()」の形式になるか説明してみる。

2012年2月21日

JavaScriptでは即時関数という仕組みがあります。

即時関数は、グローバルな名前空間を汚さない無名関数を作って、その関数を直ぐにコールする方法です。
コードは、以下のような形式になります。

(function() {
	alert( "hello" );
})();



jQueryとかのサンプルを見ると良く見る形式ですが、なぜこの形式で即時関数を定義できるのか、
改めて考えてみます。




まず、無名関数を作ります。

function() {
	alert( "hello" );
}




function()…の固まりは、関数を返すはず。
これは、変数に代入するパターンで考えればイメージしやすいです。

// function()...で生成した関数オブジェクトを変数に代入している
var showMessage = function() {
	alert( "hello" );
}




関数の呼び出しは関数オブジェクトの後に”()”をつければコールできることになります。
なので、最後に()をつける。

// 挨拶を表示する関数オブジェクトを作って直ぐに実行する
var showMessage = function() {
	alert( "hello" );
}();


でも、一回しか呼ばれない処理の場合、showMessageという変数に代入する必要はないです。
というか,無駄に変数を増やししたくない。


なので、変数に代入する替わりに,()演算子で無名関数のオブジェクトを取得し、直ぐにコールします。

(function() {
	alert( "hello" );
})();


故に、「(function(){…})()」の形式によって、無名関数を即時呼び出し出来る即時関数を作ることが出来ます。また、当然ながら、この関数に対して名前は付いてないので、同じ処理を再呼び出すことは出来ないです。




この即時関数、再呼び出しが出来ないので一見すると不便そうですが、何の利点があるのでしょうか？
これは、ページのonLoad処理や各種初期化処理はそもそも複数回呼び出す必要はないし、再利用しないものに対して名前をつけると他の処理(他の人が作ったライブラリとか)と名前が衝突する危険が出てきます。
なので、”名前を付けない関数”を作ってコールするという方法にメリットが出てきます。


自分で作った画面専用のスクリプトなら、このテクニックは必ずしも必要で貼りませんが、ブックマークレット、ブログパーツ、共通ライブラリなど、他の処理と干渉させてはいけないプログラムを作る場合には必須となる手法です。

関連記事
同じカテゴリの記事はこちらから!! → JavaScript

コメントを残す

メールアドレスが公開されることはありません。