Javascriptのクロージャに関する初歩的な質問

Question

閲覧ありがとうございます。
Javascriptのクロージャーについての基本的な疑問があります。

var countUpFromZero = function() {
var count = 0;
return function() {
console.log(count);
count += 1;
}
}();

countUpFromZero(); //0を出力
countUpFromZero(); //1を出力
countUpFromZero(); //2を出力

上記は基本的なクロージャだと思います。

質問の内容は以下の通りです。
countUpFromZero()を処理するたびに、var count = 0で初期化されているのに、出力結果が１ずつ増えていくのはなぜなのでしょうか？

このような質問をしている時点で私はクロージャをよく理解していないと思いますが、なんとか理解したいと思っています。
一応、javascriptのスコープチェーンとレキシカルスコープの基本的な点は理解しているつもりです。

回答宜しくお願いします。

Answer 1

説明の為に関数名を付けます。

'use strict';
var countUpFromZero = function parent () {
    var count = 0;
    return function countUpFromZero () {
        console.log(count);
        count += 1;
    }
}();  // 即時関数式で関数を即座に呼び出す為、変数 countUpFromZero には function countUpFromZero が格納される

countUpFromZero(); // 0 を出力
countUpFromZero(); // 1 を出力
countUpFromZero(); // 2 を出力

コメントに書いたように、**「変数 countUpFromZero には function countUpFromZero が格納」**されます。
関数 parent で宣言された変数 count はスコープチェーンの規則によって function countUpFromZero から参照可能ですが、この変数は function parent 内に閉じ込められます。
従って、countUpFromZero() が呼び出される為に function parent スコープ内の変数 count を参照し、インクリメントし続ける事になります。

Re: tetsu95 さん

Comments

[退会済みユーザー]

回答ありがとうございます。
変数countUpFromZeroにはreturnの内容である関数が格納されるのは理解できます。

私が考えているのは以下の通りです。
1回目のcountUpFromZeroが実行されると、var count=0が実行され、次にreturn文が処理され、変数countUpFromZeroに関数countUpFromZeroが格納される。
そしてconsole.log(count)で外側の関数にあるparentへの参照を獲得して0を出力する。

２回目のcountUpFromZeroの実行の際もvar count = 0が実行されると思う（ここが間違っているのかもしれません）ので、２回目以降も0を出力するのではないのか？ということを思ったのです。
出力結果から考えて間違っているのは私なのですが、納得がいかないのです。

[think49]

var count = 0; が実行されるのは function parent が呼び出された時ですが、これは変数 countUpFromZero への格納時に既に終わっています。
countUpFromZero(); で実行されるのは function countUpFromZero であり、function parent は呼び出していません。
従って、countUpFromZero(); で呼び出されても var count = 0; は実行されません。

[退会済みユーザー]

回答ありがとうございます。
var count = 0; の実行タイミングを誤解していたようでした。
おかげさまで納得できました！
ありがとうございます！

Answer 2

みなさんの言う通りです。
想定している動きをするのは以下のようなコードですね。

var countUpFromZero = function() { 
    var count = 0; 
    return function() { 
        console.log(count); 
        count += 1; 
    } 
};

// 毎回0と表示
countUpFromZero()();

Comments

[退会済みユーザー]

回答ありがとうございます。
提示していただいたコードと、質問内で私が提示したコードの差異を確かめることでよく理解できました！

Answer 3

クロージャというよりも文法を勘違いされているかもしれません。
関数の後ろにかっこをつける書き方は、関数に引数を渡して即実行するものです。

var x = function(n){
  return n;
}(0);
//x=0

ですので、御質問のコードの外側の関数はその場で実行されますから、countUpFromZeroに代入されるのはその結果です。

Comments

[退会済みユーザー]

回答ありがとうございます。
関数の即時実行の書き方と適切な使い方についても調べてみようと思いました！

Answer 4

countUpFromZero()を処理するたびに、var count = 0で初期化されているのに

されていません。

countUpFromZeroに代入されているのは、無名関数がreturnで返すfunction() {console.log(count);count += 1;} です。

Comments

[退会済みユーザー]

回答ありがとうございます。
var count = 0; の処理タイミングを誤解していたことに気付きました！

Answer 5

こっちの方が理解しやすいと思います。
countとfunc変数を初期化+定義した後に、戻り値としてfunc変数を返す。
…という内容の即時実行関数を実行しているわけです。

var countUpFromZero = function() {
    var count = 0;
    var func = function() { 
        console.log(count); 
        count += 1; 
    }
    return func;
}();

---

countUpFromZero(); を叩くと下記の部分しか実行されません。
count変数を初期化している箇所は何処にもありません。

console.log(count);
count += 1;

Comments

[think49]

なるほど。その延長線上ならこういう書き方も出来ますね。
http://ideone.com/72kVgc