JavaScript、クロージャーにつきまして

Question

お世話になっております。
JavaScriptを勉強中のものです。

関数に関しての質問です。
「開眼！JavaScript」（オライリージャパン）101pにクロージャーの例として、下記のコードが挙げられていました。

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

そこで、これを

var countUpFromZero = function(){
 	return function(){
 		return ++count;
 	}
}();
var count = 0;

と書き換えてみたところ、同じ挙動をしました。
スコープチェーンは関数が定義された時点で生成されるとのことですが、このばあい、countUpFromZeroによって返される無名関数がその後に定義される変数count を参照できるのはどうしてでしょうか？

どなたかよろしくお願いいたします。

Comments

[HayatoKamono]

回答ではないですが、参考として、次のキーワードのいずれかで検索してみて下さい。変数 巻き上げ、ホイスティング、hoisting

[Behemoth]

ごヒント、ありがとうございます。まずはそこから理解を深めていきたいです。

Answer 1

HayatoKamonoさんと同じく、ぱっと見は巻き上げと思いました。

var count = 0;前後のconsole.logの結果を見て下さい。
var宣言前のconsole.logが変数宣言前なのにエラーにならない（暗黙的に変数宣言されたものとして扱われる）のが巻き上げです

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

console.log(countUpFromZero()) //1
console.log(countUpFromZero()) //2
console.log(countUpFromZero()) //3

こちらはオライリーさんのJavascriptパターンP14　2.2.2巻き上げに記載あります。

Comments

[Behemoth]

ご回答ありがとうございます。
var countUpFromZero = function(){
return function(){
return ++count;
}
}();

console.log(countUpFromZero())　//Nan
var count = 0
こうすることで理解できたように思います。

Answer 2

以下のソースを動かしながら考えてみて下さい。答えお待ちしてます。

…えらそ〜な事を書きましたが、自分も理解しきっていないかもしれないです。
有意識者の方、ツッコミお待ちしてます。

Q.なぜクロージャは、値を保持できるのか？

Q1:countUpFromZeroに何が入っていますか？
Q2:countUpFromZeroにはcountが無いからどこを参照していますか？
Q5:countUpでは、countの値が保持できないのは何故ですか？

Q.クロージャのメリットは？

Q3:参照しているQ2のcountのスコープはグローバルですか？関数スコープですか？
Q4:Q3のスコープだと、countUpFromZero関数以外からアクセスは出来ますか？

var countUpFromZero = function () {
    var count = 0;
    return function () {
        return ++count;
    }
}();

console.log(countUpFromZero.toString());
console.log(countUpFromZero());
console.log(countUpFromZero());
//count++;
console.log(countUpFromZero());

var countUp = function () {
    var count = 0;
    return (++count);
};

console.log(countUp());
console.log(countUp());
//count++;
console.log(countUp());

Comments

[Behemoth]

Q1 countUpFromZero には　無名関数と変数countが入っています
Q2 無名関数が定義されたとき、"return ++count" のcountはcountUpFromZero内の変数countを参照する。そして無名関数が呼び出された際にもそれを参照し続けるのでcountがインクリメントされ続ける。
Q3 countのスコープは関数スコープ
Q4できない
Q5 ここが理解できていないところだと思います。countUpの場合、呼び出された際に"var count = 0"となっておいるため、毎回countの値が０に戻され、結果として１が返されるのでは、と考えました。
ただその理屈で行くと、countUpFromZeroにおいても毎回countの値は０に戻されてしまいます。
また、countUpFromZero.toString // function () {
return ++count;
}
とのことですが、var count = 0はどこにいったのでしょうか？あまりに初歩的な質問でしたら、申し訳ありません。

[oikashinoa]

Q1 countUpFromZero には　無名関数と変数countが入っています

以下の結果を見てみました？
console.log(countUpFromZero.toString());
→count有りました？

Q2 無名関数が定義されたとき、"return ++count" のcountはcountUpFromZero内の変数countを参照する。そして無名関数が呼び出された際にもそれを参照し続けるのでcountがインクリメントされ続ける。

正解です。関数宣言時にスコープチェーンが決定します。
countUpFromZero（内容はfunction (){return ++count;}）が有る限り、countへの参照が続きます。

Q3 countのスコープは関数スコープ
Q4できない
正解です。関数スコープなので関数より上のスコープ階層からは操作されなくなります。
逆にいうと、countを宣言している関数に内包されている子供な関数関数からは
スコープチェーンにより参照可能です。
→countUpFromZero（内容はfunction (){return ++count;}）にはcountが無いけど、
　上位のスコープに有るcountを参照している。上位の関数は終了したけどcountへの参照は
　続いているので、count（の値）は保持される。

Q5 ここが理解できていないところだと思います。countUpの場合、呼び出された際に"var count = 0"となっておいるため、毎回countの値が０に戻され、結果として１が返されるのでは、と考えました。
ただその理屈で行くと、countUpFromZeroにおいても毎回countの値は０に戻されてしまいます。
また、countUpFromZero.toString // function () {
return ++count;
}
とのことですが、var count = 0はどこにいったのでしょうか？あまりに初歩的な質問でしたら、申し訳ありません。

実際の動きを見たほうが理解しやすいです。
1.Q1で何を間違っているか確認しましょう。
2.以下の行の各行に付けれるところはすべてブレークポイント付けてデバッグ実行してみて下さい。
　`var count = 0で毎回countの値は０にならないのは何故？`について分かると思います。

```JS
var countUpFromZero = function parent() {
var count = 0;
return function childen() {
return ++count;
}
}();

console.log(countUpFromZero());
```

[Behemoth]

ご返信が遅くなりました。
ご解説ありがとうございます。
Q5についてなのですが、
まず
var countUpFromZero のparent関数が即時実行され、
var countUpFromZero = function children (){
return ++count;
}
になると思います。
var count = 0の下にブレークポイントをつけても、二回目以降は反応しないことを確認しました。
というこはparentのもっている関数スコープの変数countはどこかに隠ぺいされているものの、その存在を保っている、ということでしょうか？

[oikashinoa]

> parentのもっている関数スコープの変数countはどこかに隠ぺいされているものの、その存在を保っている、ということでしょうか？
countUpFromもcountUpZeroも関数抜けたのに、
countUpFromZeroだけcountの値が保持するのはなぜか？

var countUp = function () {
var count = 0;
return (++count);
};

countUp関数が終わるとcountを参照するものがないので、countは破棄される

var countUpFromZero = function parent() {
var count = 0;
return function childen() {
return ++count;
}
}();

countUpFromZero関数の中身はcountをreturnするchilden関数です。（countを参照する）
だからparent関数にあるcount変数は、parent関数が終わっても破棄されません。（隠蔽されているわけではない)

もしclassが分かるなら、以下と読み替えるとわかりやすいかな。
closure=メソッドが1つだけのclass
↓　

var countUpFromZero = function constructor() {
var count = 0;
return function method() {
return ++count;
}
}();

[Behemoth]

すみません、遅くなりました。
ご返信をしたと思い込んでおりまして...
ご解説まことにありがとうございました。
多くのことを学ばせていただきました。
また、よろしくお願いいたします。

Answer 3

ちなみにBehemothさんが書き換えた物（下記countUpFromZero_nonClosure）はクロージャの動作をしていません。以下を動かしてみると（エラーでて動かない所有ります。削ってみましょう）動きが解ると思います

var countUpFromZero = function () {
    var count = 0;
return function(){
    return ++count;
}
}();

console.log(countUpFromZero()) //1
console.log(countUpFromZero()) //2
count++; // count is not defind
console.log(countUpFromZero()) //3



var countUpFromZero_nonClosure = function () {
    return function(){
        return ++count2;
    }
}();
var count2 = 1;

console.log(countUpFromZero_nonClosure()) //2
console.log(countUpFromZero_nonClosure()) //3
count2++;　　　//count2が関数外から変更できている
console.log(countUpFromZero_nonClosure()) //4？5?試してみて下さい

Comments

[Behemoth]

回答、ありがとうございます！
クロージャーのポイントは「関数スコープ内で宣言された変数を参照し続けること(生成された環境を記憶している)」にある、ということでしょうか？
また、countUpFromZero_nonClosureは、クロージャーを生成するわけではなく、単なるcountという名前の変数の値をインクリメントする関数、ということですか？

[oikashinoa]

理解しきれていない部分が有ると思いましたので、別回答でソースを書きました。
そちらを見て下さい。

[Behemoth]

承知しました。ありがとうございます。

Answer 4

「開眼！JavaScript」 良書ですよね。

P98　7.4スコープチェーン　を見ましょう。

var countUpFromZero = function(){
     return function(){
         return ++count;
     }
}();
var count = 0;　　　　// ここの値を変えてみる

ここにcountが宣言されていないので、上のスコープの階層にcountを探しに行きます。

---

var count = 0;の値を変えたらどうなるかわかりやすいですよ。

Comments

[Behemoth]

ありがとうございます。
私はまだ「二分開き」といった感じですが、頑張って内容をモノにしたいです。
教えていただいた部分をしっかりと確認しておきます。