編集履歴

回答編集履歴

⑤を復帰値に変更

2020/01/15 13:18

投稿

スコア5406

answer CHANGED Viewed

@@ -41,4 +41,4 @@
 increment();  //4 : 別の変数であることの確認
 ```
-![イメージ説明](65ffe4da7b4596a308932a8ed06e940e.png)
+![クロージャー処理の流れ](1251ef69b6ee3f074b8b2c69bb1ffd9e.png)

水色番号追加

2020/01/15 13:18

投稿

shiracamus

スコア5406

answer CHANGED Viewed

@@ -41,4 +41,4 @@
 increment();  //4 : 別の変数であることの確認
 ```
-![イメージ説明](81924f2a12b71f6660d674c8eb52e4d0.png)
+![イメージ説明](65ffe4da7b4596a308932a8ed06e940e.png)

図を追記

2020/01/15 11:38

投稿

shiracamus

スコア5406

answer CHANGED Viewed

@@ -39,4 +39,6 @@
 increment2(); //2
 increment();  //4 : 別の変数であることの確認
-```
+```
+![イメージ説明](81924f2a12b71f6660d674c8eb52e4d0.png)

コードにコメント追加

2020/01/15 11:32

投稿

shiracamus

スコア5406

answer CHANGED Viewed

@@ -29,13 +29,13 @@
   return do_increment         // 変数countを抱えた do_increment関数オブジェクトを返す
 }
-let increment = make_increment();
+let increment = make_increment();  // make_increment関数を呼び出して do_increment 関数を作り increment変数に代入
 increment();  //1
 increment();  //2
 increment();  //3
-let increment2 = make_increment();
-increment2(); //1 : increment とは別の領域に count変数と do_increment関数が作られる
+let increment2 = make_increment();  // increment とは別の count変数と do_increment関数を作る
+increment2(); //1
 increment2(); //2
 increment();  //4 : 別の変数であることの確認

コードにコメント追加

2020/01/15 11:06

投稿

shiracamus

スコア5406

answer CHANGED Viewed

@@ -17,16 +17,16 @@
 make_increment() を呼び出すごとに 変数 count 領域と do_increment 関数オブジェクト が作られます。
 ```javascript
-function make_increment () {
+function make_increment () {  // 関数定義により関数オブジェクトが作られる
-  let count;
+  let count;                  // 関数を呼び出すと変数領域が作られる
-  function do_increment () {
+  function do_increment () {  // 関数定義により関数オブジェクトが作られる
-    count += 1;
+    count += 1;               // do_increment() を呼び出したときに +1 される
     console.log(count);
   }
-  count = 0;
+  count = 0;                  // make_increment() を呼び出したときに代入する
-  return do_increment
+  return do_increment         // 変数countを抱えた do_increment関数オブジェクトを返す
 }
 let increment = make_increment();

名前付き関数に書き換えた例を追記

2020/01/15 10:53

投稿

shiracamus

スコア5406

answer CHANGED Viewed

@@ -8,4 +8,35 @@
 次に、`increment()` でクロージャー（内側のfunction) を呼び出すと `count+=1;` を実行して、外部変数countが `1` に変わり、`return count;` で 1 が帰ります。
 更に、`increment()` でクロージャー（内側のfunction) を呼び出すと `count+=1;` を実行して、外部変数countが `2` に変わり、`return count;` で 2 が帰ります。
-更に、`increment()` でクロージャー（内側のfunction) を呼び出すと `count+=1;` を実行して、外部変数countが `3` に変わり、`return count;` で 3 が帰ります。
+更に、`increment()` でクロージャー（内側のfunction) を呼び出すと `count+=1;` を実行して、外部変数countが `3` に変わり、`return count;` で 3 が帰ります。
+---
+即時関数を名前付き関数にしてみました。
+こうすることで、make_increment() を何度も呼び出せます。
+make_increment() を呼び出すごとに 変数 count 領域と do_increment 関数オブジェクト が作られます。
+```javascript
+function make_increment () {
+  let count;
+  function do_increment () {
+    count += 1;
+    console.log(count);
+  }
+  count = 0;
+  return do_increment
+}
+let increment = make_increment();
+increment();  //1
+increment();  //2
+increment();  //3
+let increment2 = make_increment();
+increment2(); //1 : increment とは別の領域に count変数と do_increment関数が作られる
+increment2(); //2
+increment();  //4 : 別の変数であることの確認
+```

説明追記

2020/01/15 10:48

投稿

shiracamus

スコア5406

answer CHANGED Viewed

@@ -3,8 +3,8 @@
 インタープリタの気持ちになって処理を追ってみましょう。
 まず、最初の`function`で即時関数を作ります。
 この時点では `let count=0;` は実行されません。
-increment に代入するときの最後が `();` になっていて即時関数を呼び出しています。
+変数`increment` に代入するときの処理の最後の部分が `();` になっていて即時関数を呼び出しています。
-`let count=0;` を実行して変数`count`が`0`になり、その変数`count`を参照する内側の即時関数functionを作って return し、その即時関数が外部変数`count`を抱えた・閉じ込めた・クローズしたクロージャーとなって変数`increment`に代入されます。
+この呼び出しによって `let count=0;` を実行して変数`count`が`0`になり、その変数`count`を参照する内側の即時関数functionを作って return し、その即時関数が外部変数`count`を抱えた・閉じ込めた・クローズしたクロージャーとなって変数`increment`に代入されます。
 次に、`increment()` でクロージャー（内側のfunction) を呼び出すと `count+=1;` を実行して、外部変数countが `1` に変わり、`return count;` で 1 が帰ります。
 更に、`increment()` でクロージャー（内側のfunction) を呼び出すと `count+=1;` を実行して、外部変数countが `2` に変わり、`return count;` で 2 が帰ります。