JavaScriptのイロハ：「関数はオブジェクト」って理解できますか？

白石俊平
2008/01/10 18:00

今回はJavaScriptの「関数はオブジェクトである」という概念について考えてみます。

　変数に再代入する、と言う例は先ほどあげましたので、今度は「関数の引数」として関数オブジェクトを渡す例を考えます。次に挙げる「callTwice()」関数が、どんな処理を行うかお分かりでしょうか。

function callTwice(fn) {
  fn();
  fn();
}

　この関数に無名関数を渡して実行してみましょう。

function init() {
  // 無名関数を引数にとり、callTwice()の呼び出し
  callTwice(
    function () {
      alert("こんちは!");
    });
}

　渡された関数は、callTwice()の中で二回実行されます。従ってこの例では、「こんちは!」という文字列が二回アラートで表示されます。このように、関数オブジェクトを引数として、他の関数を呼び出すということもJavaScriptでは日常茶飯事です。

関数オブジェクトを戻り値にする

　では、今度は関数オブジェクトを関数の戻り値として利用してみましょう。

　実際に皆さんがプログラミングをするとき、こうした処理を書くことはあまり多くないかもしれませんが、フレームワークではたまに利用されていますので、理解しておくにこしたことはありません。

　以下のコードは「ボタンを押すたびに数値が0, 1, 2...と増加し、それをアラートで表示する」と言うものです。

<html>
<head>
  <script type="text/javascript">

    // 関数オブジェクトをリターンする関数
    function createCounter() {
      var n = 0;
      // (1) 無名関数を作成してリターン
      return function() {
        return n++;
      };
    }
    // createCounter()を呼び出し、
    // 戻り値 (関数オブジェクト) を変数に格納しておく
    var counter = createCounter();

    function printCount() {
      // (2) counterを実行すると、createCounter()内の
      //     ローカル変数nの値が返る
      alert(counter());
    }
  </script>
</head>
<body>
  <!-- ボタンがクリックされるたび、printCount()を呼び出す -->
  <button onclick="printCount()">クリック！</button>
</body>
</html>

　処理の詳細はコメントを参照してください。ここでは、以下のポイントをきっちり押さえましょう。

  • コメント（1件）

#1 D298  - 2008/01/19 12:25:08

関数がオブジェクト、という概念はC言語の関数ポインタになぞらえると理... 続きを見る
» 不適切なコメントを報告する
記事の感想やご意見をコメントでお寄せください（CNET_IDログインが必要です）
ログイン パスワードを忘れた方  |  新規登録
  • 今日のトップ記事
  • 昨日
  • 2日前
  • 3日前
  • 6日前
  • 7日前
  • 新着記事
  • 人気記事
  • 特集
  • ブログ
  • 話題のタグ
Mozilla 小技 Google XHTML PHP Firefox iPod touch Off Topic server Database iPhone 3G Tips Mac OS X Firefox 3 iPhone フレームワーク 開発環境 Apache RIA Python Solaris 仮想化 入門 Safari Apple Eclipse CSS 3 Microsoft ライブラリ HTML Webデザイン イロハ オープンソース Linux Adobe Internet Explorer リファレンス Opera Ajax Webアプリケーション開発 C/C++ CSS SOA Java Ruby JavaScript Leopard Windows ブラウザ Flash
  • 話題のタグを見る »