はじめに

こんにちは！@70days_jsです。

Closureを学びました。

60日目。(2019/12/17)
よろしくお願いします。

サイトURL

やったこと

結論から。
Closureとは？
変数が定義された環境を保持する仕組み
という解釈が一番しっくりきました。

間違っていたらコメントよろしくお願いします。

とてもシンプルなカウンターを作りました。(gif)↓

html↓

  <body>
    <h1>Closure</h1>
    <input type="button" id="button" value="+" />
    <input type="button" id="button2" value="-" />
    <div id="displalyCount"></div>
  </body>

JavaScript↓


function countApp() {
  let count = 0;
  return function plusCount() {
    count++;
    return count;
  };
}

function countApp2() {
  let count = 0;
  return function plusCount() {
    count--;
    return count;
  };
}
let button = document.getElementById("button");
let button2 = document.getElementById("button2");
let displalyCount = document.getElementById("displalyCount");
let counter1 = countApp();
let displalyCount2 = document.getElementById("displalyCount2");
let counter2 = countApp2();

button.addEventListener("click", function() {
  counter1();
  displalyCount.innerHTML = counter1() + counter2();
});

button2.addEventListener("click", function() {
  counter2();
  displalyCount.innerHTML = counter1() + counter2();
});

countApp関数のなかのcountは常に保存された状態です。

function countApp() {
let count = 0;
return function plusCount() {
count++;
return count;
};
}

なので、この先countApp関数を使おうと思えば、

let hoge = countApp();

のようにしてhogeを経由すれば、先に行っていたカウントは消されずに済みます。

今回、押した回数の数え方はここで行っています。

counter1();
displalyCount.innerHTML = counter1() + counter2();

counter2();
displalyCount.innerHTML = counter1() + counter2();

感想

Closureは分かったような、まだ分かり切れていないような。。。
何だろう。わかってるのだろうか・・・？

最後まで読んでいただきありがとうございます。明日も投稿しますのでよろしくお願いします。

参考

JavaScript中級者への道【5. コールバック関数】
ブレイクスルーJavaScript フロントエンドエンジニアとして越えるべき5つの壁―オブジェクト指向からシングルページアプリケーションまで(← 本を借りました。リンクはamazonページです)