[JavaScript]　猿でもわかるクロージャ超入門　２　関数の中の関数

2009/01/09

クロージャとは関数である。

ずばり言います。

クロージャとは、関数である

まずココがポイント。

次に、たいていの場合、

クロージャとは関数の中の関数である

これで、クロージャのことを３０％程度は理解したことになります。

だから、
「クロージャーって何？」
って誰かに聞かれたら、
「ああ、関数の中に書く関数のことでしょ」
って答えとけば、３０％ぐらい正解ということになります。(w

関数の中の関数

Javascriptでは、関数の中に関数を書くことができます。
もうちょっと正確に言うと、関数の中で別の関数を定義することができます。

//関数の中で関数を定義

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

ここで、関数innerを呼び出すにはどうしたらいいでしょうか？
下記のコードをコピペして、デスクトップに.htmlファイルとして保存して、ブラウザで開いてみてください。

<script>
function outer(){
    function inner(){
        alert("hello");
    }
}

inner(); // エラー!
</script>

これはエラーになるか、もしくは何も表示されません。
innerはouter関数の中だけで通用するローカルな名前であって、グローバル空間でinnerは定義されていないからです。
ではやり方を変えてみましょう。

<script>
function outer(){
    function inner(){
        alert("hello");
    }
}

outer(); // 何も起こらない!
</script>

これは、エラーにはなりませんが、やはり何も表示されません。
outer( )は実行されたものの、outer内のinnerは宣言されただけで実行(呼び出し)されていないからです。

innerを実行するには、outer内でinner( )を明示的に実行してやる必要があります。

<script>
function outer(){
    function inner(){
        alert("hello");
    }
    inner();  //←コレ
}

outer(); // "hello"と表示された！
</script>

おめでとうございます。
見事"hello"が表示されましたね。

outer( )が呼び出されたとき、outer内でまずinnerが宣言され、その直後にinner( )が実行されたのです。

これで、あなたはクロージャを３０％程度理解したことになります。

「関数の中の関数」をもうちょっと進化させると、クロージャを作ることができます。
でももうちょっとだけ辛抱してください。
その前に、あと２つ別のテクニックを覚える必要があります。

次の記事　　猿でもわかるクロージャ超入門　３　無名関数

カテゴリ: JavaScript closure