即時関数
なんか変な記述を見つけて、びっくりして調べた。
即時関数 というそうだ。
【環境】
Firefox:36.0.4
Firefox:36.0.4
書式
- // 基本形
- (function(){
- 処理
- })()
- // 関数名はあってもなくてもよい
- (function hoge(){
- 処理
- })()
- // 引数値の指定は、尻尾の()で行う
- (function( arg ){
- 処理
- })( '引数' )
- // 引数指定用の()の位置は下記でもよい
- (function(){
- 処理
- }())
比較
- // 一般
- function hoge() {
- alert( 'test' );
- }
- hoge(); // test
- // 即時関数
- (function hoge() {
- alert( 'test' );
- })();
意義
「グローバル変数の使用を抑える」ことができる。
JavaScript の場合、変数も関数もグローバル変数となる。
- var hoge;
- function hoge() {}
これらは共にグローバルオブジェクトのプロパティとして定義される。
ブラウザの場合は、Window オブジェクトがグローバルオブジェクトなので
- window.hoge
でアクセス可能。
即時関数の場合は、その場使い捨てなので、
グローバルオブジェクトに登録されない。
＝「グローバル変数の使用を抑える」
付加効能
関数定義と呼び出しを一括で行える
＝スクリプトを１行削ることができる 🙄
注意事項
記述場所
読み込み時にその場で実行してしまうので
処理対象に DOM 要素を設定している場合は
DOM 出力後に記述しないと、エラーとなってしまう。
つまり、<head> で直接記述したり、外部ファイルを読み込んではダメ。
</body> 直前に記述したり、外部ファイルを読み込んでやること。
参考サイト