javascript 入門 クロージャについて

Question

function outer(){
    var x = 1;

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

}

var f =  outer(); 
f();  // 1
f();  // 2
f();  // 3
</script>

なぜ上記のような結果になるのかわかりません。

関数内関数で　ｘ　+　１がxに代入されているので、最初のfは２ではないのでしょうか？

alert(x)以下の式はalert(x)には関係ないのでしょうか。

また、最初に定義されているx=1は、2回目のfでは関係ないのでしょうか。

よくわかっていないのでわかりづらい文章ですが、教えてください。

Answer 1

まず、この結果が1,2,3と表示されるのは理解できると思います。

var x = 1;
for(var i = 0; i < 3; ++i){
    alert(x);
    x = x + 1;
}

次に、ループの中身を関数にします。

カウントアップの部分が戻り値になります。
通常の関数はxの値を保持することができませんので、毎回引数にいれて更新する必要があります。

var f = function(x){
    alert(x);
    return x + 1;
};

var x = 1;
for(var i = 0; i < 3; ++i){
    x = f(x);
}

さらに、クロージャを使って関数の外部の変数を関数内から利用し、更新します。
変数は関数の外部にありますので、関数呼び出しによって初期値にもどることはありません。（と理解してください。）

var x = 1;
var f = function(){
    alert(x);
    x = x + 1;
};

for(var i = 0; i < 3; ++i){
    f();
}

最後に、変数xを隠すためにfunctionで括ります。

質問のコードとほぼ同じになります。

function outer(){
    var x = 1;
    var inner = function(){
        alert(x);
        x = x + 1;
    };
    return inner;
};
var f = outer();

for(var i = 0; i < 3; ++i){
    f();
}

Answer 2

関数内関数で　ｘ　+　１がxに代入されているので、最初のfは２ではないのでしょうか？

alert関数によるダイアログ表示が, x=x+1の実行前に呼び出されている以上, 出力される内容は初期値である1です. また, alert関数はスクリプトの実行をブロックするため, この時点ではまだ関数fの処理は完了していません.

alert(x)以下の式はalert(x)には関係ないのでしょうか。

次回の関数f呼び出しに影響する処理が記述されているため"関係ない"とは言えません.

また、最初に定義されているx=1は、2回目のfでは関係ないのでしょうか。

outer関数呼び出し時に生成されたスコープを関数fが参照し続けているため, そのスコープで定義された変数xは残り続けます. ただしx=1という代入処理はouter関数呼び出しの際に一度だけ行われます.

NOTE:
alertとx=x+1の行を入れ替えたコードを実行し, その動作の違いについて比べてみて下さい.

function outer(){
    var x = 1;

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

}

var f =  outer(); 
f();  // ?
f();  // ?
f();  // ?