Javascriptでクロージャを理解する

Javascriptのクロージャを理解していない場合はかならず@DQNEO様の次のエントリーを読むこと
[JavaScript]　猿でもわかるクロージャ超入門　まとめ - DQNEO起業日記

各セクションのサンプルコードまとめ

[JavaScript]　猿でもわかるクロージャ超入門　２　関数の中の関数 - DQNEO起業日記

クロージャとは関数のなかの関数

次のコードはエラーになる

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

inner(); // error

動作しないコード
ここでのinner()は宣言されたのみ（実行はされない）

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

outer();

outer()のなかでのinner()の明示的な実行

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

outer();

[JavaScript]　猿でもわかるクロージャ超入門　３　無名関数 - DQNEO起業日記

無名関数の定義と即実行

(function(){})();

アラートを実行

<script>
( function(){alert("hello");} )(); // output "hello"
</script>

[JavaScript]　猿でもわかるクロージャ超入門　４　関数を返す関数 - DQNEO起業日記

関数を返す関数

無名関数を代入した変数を返す

function outer() {
    var inner = function() {
        alert("hello");
    }
    return inner;
}
var f = outer();
f();

宣言した関数を返す

function outer() {
    var inner() {
        alert("hello");
    }
    return inner;
}
var f = outer();
f();

無名関数を直接返す

function outer() {
    return function() {
        alert("hello");
    };
}
var f = outer();
f();

function outer() {
    return function() {
        alert("hello");
    };
}
var f = outer();
f();

[JavaScript]　猿でもわかるクロージャ超入門　５　クロージャを作る - DQNEO起業日記

クロージャの再定義

function outer() {
    var x = 1;

    return function () {
        alert(x);
    };
}

var f = outer();
f(); // output "1"

クロージャをつかった計算プログラム
クロージャを用いることで状態を保持できる

function outer() {
    var x = 1;

    return function () {
        alert(x);
        x = x++;
    };
}

var f = outer();
f(); // output "1"
f(); // output "2"
F(); // output "3"

[JavaScript]　猿でもわかるクロージャ超入門　６　クロージャの使いどころ - DQNEO起業日記

jQueryでクロージャを利用する

<form name="frm" id="frm">
    <input type="submit" value="Order" />
</form>

$(function(){
    var isClicked = false;

    $('#frm').submit(function(){
        if (isClicked) {
            alert('Clicked already');
            return false;
        }

        isClicked = true;
    });
});