javaScriptクロージャについて

Question

javaScriptについて勉強しているのですがどうしてもクロージャを理解することができません。
いくつかWebサイトの記事を読んでみたのですがやはりどうなっているのかわからないでいます。

function makeCountor(){
  var count = 0;
  function push(){
    count++;
    conlose.log(count);
  }
  return push;
}

c = makeCountor();
c();　　　//->1
c();       //->2
c();      //->3

上記のようなコードを実行した場合１、２、３、とカウントされて表示されて行くらしいのですが、これがよく理解できていません。
私の理解ではcの実態はmakeCountor関数なのでc()が実行されると

function makeCountor(){
  var count = 0;
  function push(){
    count++;
    conlose.log(count);
  }
  return push;
}

この関数部分が実行されていると思っています。
関数の中の１行目で下記のようにcountを毎回初期化してしまっています。にも関わらずなぜcountに格納された値が増えて１、２、３とカウントアップしているのか理解できないです。

var count = 0;

c();が実行されている時に実行するのは以下の部分だけなのでしょうか？

function push(){
    count++;
    conlose.log(count);
  }
  return push;

独学では理解できそうになかったので皆様のお力をお借りしたいです。よろしくお願いします。

Answer 1

ご自身が書いたコードをよく見てみそ。
makeCountor関数はpush関数を返してて、それがcって変数に入ってるんでそ。
ようは、count変数の初期化処理はmakeCountor関数で行っていて、push関数では初期化処理はしていないのでそ。だからc変数で繰り返しpush関数を実行してもcount変数の中身は増えていくんでそ。

Answer 2

c = makeCountor();は、makeCountorを実行してその戻り値をcに代入すると言う事です。
その戻り値とは何かというと、return push;とあるので、戻り値はpushで、
pushとは何かというとfunction push() { ～ }です。
つまり、cの中身はpushであり、その実行c()はpush()です。

c();が実行されている時に実行するのは以下の部分だけなのでしょうか？

は、間違いで、c()で実行されるのは、

function push(){
    count++;
    conlose.log(count);
}

だけです。

Comments

[hodoru3sei]

ありがとうございます！とてもわかりやすい説明でした。
cの中にmakeCountor関数が全て入っているのだと勘違いしてしまっていました

[otn]

> cの中にmakeCountor関数が全て入っているのだと勘違いしてしまっていました

それは、
c = makeCountor;
と括弧を付けず書いたときです。

とコピペして違和感が。カウンターは英語だと Counter です。

[hodoru3sei]

ありがとうございます！英語も勉強します！！

Answer 3

C言語等では関数というのは特別な構文によって書かれる特別なモノという扱いですが、
JSの関数は「尻に()を付けて実行出来る」特性を持っている普通の値です。

ですのでvar hoge = function () {};という風に変数に格納したり、
配列に埋め込んだり、関数の引数や戻り値として気軽に使えます。
この辺の特性を関数は第一級オブジェクト等と呼んだりします。

これが前提

---

makeCountor関数を叩くと下記の順番に実行されます。

• 関数を実行したことで、新たにmakeCounter関数世界内にスコープが作成される
• makeCounterスコープ内にcount変数を宣言し、値0を格納
• makeCounterスコープ内にpush関数を宣言
• makeCounterスコープで作ったpush関数を戻り値として返す

戻り値のpush関数を実行します。

• push関数を実行したことで、makeCounterスコープ内に、新たにpushスコープを作成する
• count変数はpushスコープには存在しないので、上のスコープに探しに行き、makeCounterスコープのcount変数を参照する
• makeCounterスコープのcount変数をインクリメント

このような流れです。
オブジェクト指向プログラミングでは他のコードが容易に変数を書き換える事を禁止する為にクラスを元にインスタンスを生成して、値を閉じ込めてしまうテクニックがあります。
これをカプセル化と呼びます。

JavaScriptでは関数を実行する度にスコープが作られるという特性を利用して、関数を入れ子にして、値を閉じ込めるというテクニックでカプセル化を実現させます。
このテクニックがクロージャーです。
(ES2015でクラス構文がサポートされ、クロージャーは必須ではなくなりました)

Comments

[hodoru3sei]

ありがとうございます。前提の知識があやふやだったので頭の中がこんがらがってしまっていたような気がします。
わかりやすい説明ですごく助かりました

Answer 4

function makeCountor(){
  var count = 0;
  function push(){
    count++;
    conlose.log(count);
  }
  return push;
}

変数「count」はファンクション「makeCounter」の中で宣言されています。
外部からは見えない変数です。

しかし、ファンクション「push」は変数「count」が見える位置で宣言されているため、変数「count」は常に参照できる変数になります。

結果、

c = makeCountor();
c();　　　//->1
c();       //->2
c();      //->3

↑このような結果になるわけで、「makeCounter」を再度呼び出せば

c = makeCountor();
c();　　　//->1
c();       //->2
c();      //->3

d = makeCountor();
d();　　　//->1
d();       //->2
d();      //->3

↑このような結果になります。

Comments

[hodoru3sei]

var count = 0;関数を読んだ際count=0にはなっていないんでしょうか？

[tkturbo]

↑「c」を作成した時の「count」と「d」を作成した時の「count」は同名の別変数扱いです。よって、関数を呼んだ時に「すでに呼び出し済みの関数内で宣言されたcount」を更新することはありません。