クロージャを使用してコードを守る

/ ソフトウエア開発部　

古郡 (2010年1月12日 19:52)
ソフトウエア開発部

現在のWebアプリケーションにおいてクライアントサイドプログラム、
主にJavaScriptは非常に重要視されています。
その動きは今後も続き、外部のライブラリを使用するような機会が
今後は増えることが予想できます。

このような状況下において、開発者は外部のライブラリの影響を受けない、
または与えないようにコードを書く必要があります。

以下のように、fooという名前の関数が2つ定義されている状況を考えて下さい。

function foo(){ alert('呼びたい関数'); }
function foo(){ alert('呼ばれる関数'); }

このときに

このようなボタンを用意して、ボタンをクリックすると、
2行目に書いてあるfoo関数が呼び出されます。
これは1行目に書かれているfoo関数が、2行目に書かれているfoo関数を
上書きしてしまっていることを意味します。

このような事態を避けるためには、
先ほどのボタンのonclickイベントハンドラの設定を
以下のようにJavaScriptで行うべきです。

document.getElementById('hoge').onclick = function(){ alert('呼びたい関数'); };

しかし同じ関数を、たくさんの要素のイベントハンドラにする場合、
上記のような書き方では同じ内容の関数を複数書くことになり、保守性が下がります。
そこで、名前付きの関数を使用できるように、
クロージャを使用する以下のようなコードを書きます。

(function(){
var foo = function(){ alert('呼ばれる'); };
document.getElementById('hoge').onclick = foo;
})();

このコードを簡単に解説すると、
外側のfunction(){} が匿名関数の定義となります。
この匿名関数の定義を『()』で囲み、さらにその後ろに『()』を付けます。
これにより定義した匿名関数が、その場で呼び出されるようになります。
匿名関数の中身ですが、fooという関数を定義してそこで定義したfooを
イベントハンドラとして設定しています。

これでこの匿名関数の外部にfooという関数が存在したとしても、
イベント発生時には匿名関数内部で定義したfoo関数が呼ばれます。
逆にこの関数の前に、foo関数が定義されていても、
事前に定義されているfoo関数を、上書きするようなことはありません。

クロージャは理解するのも難しいですし、使いどころの選択も難しいですが、
既にいろいろな場所で使用されていますし、使えると便利です。
知らなかった方は、勉強して使えるようになってみてはいかがでしょうか。

「システム開発ブログ」へのコメントやご意見等ありましたら、ファンページまでお願いします。 Facebook のファンページ

[PR]
他社のシステムも直します。資産を活かしてシステムリフォーム

システムのトラブル解決を承ります。すぐにシステムリフォームを体験できます

システム開発のアイロベックス（東京都新宿区）

/ ソフトウエア開発部　  Tweet シェア

システム開発ブログ

最近の記事

カテゴリー

部署

月別アーカイブ

以前の部署別ブログ

検索

システム開発専用サイト

Windowsフォルダーアクセス権限確認ツール

Webとリアルをつなぐコンテンツマネージメントシステム

Twitter公式アカウントに認定されています