トップ 差分 一覧 Farm ソース 検索 ヘルプ RSS ログイン

JavaScript【関数】

関数

[JavaScript]
最終更新時間:2010年08月27日 16時29分03秒

関数

 無名関数

Javascriptでは関数に名前を付けずに使える無名関数というものが存在する。

通常の関数宣言
 <script type="text/javascript">
   function hoge() {
     alert("hogehoge");
   }
 </script>
無名関数を使った関数宣言

無名関数を変数に代入し後で呼び出す。

 <script type="text/javascript">
   var hoge = function() {
     alert("hogehoge");
   }
   hoge();
 </script>

上記の2つの違いは通常の関数宣言は宣言より上でhoge()を呼び出すことができるが、
無名関数を使った場合は変数に代入した後でなければ呼び出すことはできない。

無名関数を即座に実行する

無名関数は宣言より上で実行することはできないが、宣言した直後に呼び出すことが可能。

 <script type="text/javascript">
   (function() {
     alert("hogehoge");
   })();
 </script>

つまり通常はhoge();で呼び出しているhogeの部分を(function(){})で表し、
さらに関数を呼び出すために後ろに括弧を付けている。

 高階関数

これちょっとすばらしいと思った。

 <script type="text/javascript">
   function hoge() {
     return function fuga() {
       return 'foo';
     }
   }
   hoge();      // function fuga() {...}が返る。
   hoge()();    // fooが返る。
 </script>

つまり関数の呼び出しで関数を返す(この場合はfuga())定義を場合、呼び出し時に括弧を重ねることでその中の関数の値(この場合は'foo')を呼び出すことができる。

 クロージャ

クロージャとは"関数の中に定義した内部関数が外側の関数(エンクロージャ)のローカル変数を参照できる仕組み"のことを言うらしい。
なんのこっちゃ?ということなので早速例をみる。

クロージャ
 <script type="text/javascript">
   function hoge() {
     var a = 1;
     function fuga() {
       var b = 3;
       a += b;
     }
     fuga();
     alert(a);
   }
   hoge();    // 4が返る。
   hoge();    // 4が返る。
 </script>

上記の場合だと、内部関数fuga()でその外側の関数hoge()の変数aを使っている。
この変数aのことをレキシカル変数という。

クロージャで一番大事なことは"状態を保持できるようになる"ということ!

クロージャを使った状態の保持

上で書いた高階関数とクロージャを使うと状態を保持することができる。

 <script type="text/javascript">
   function hoge() {
     var a = 1;
     function fuga() {
       alert(a);
       a++;
     }
     return fuga();
   }
   var foo = hoge();
   foo();    // 1が返る。
   foo();    // 2が返る。
   foo();    // 3が返る。
 </script>

fooを実行するたびに1ずつインクリメントされる!
つまり先ほど実行した状態を保存しているということ。(保存しているからインクリメントすることができる。)
これはどうしてかというとfooで参照先を事前に定義しているから。

以下の場合はインクリメントされない。

 <script type="text/javascript">
   function hoge() {
     var a = 1;
     function fuga() {
       alert(a);
       a++;
     }
     return fuga();
   }
   hoge()();    // 1が返る。
   hoge()();    // 1が返る。
 </script>