JavaScriptでクロージャ入門。関数はすべてクロージャ？

Last updated at 2015-12-07Posted at 2013-07-22

JavaScriptでは関数はすべてクロージャです。
ではそもそもクロージャってなんなんでしょうか。

#クロージャ？？

クロージャの簡単な定義として
「自分を囲むスコープにある変数を参照できる関数」
が挙げられます。

言葉ではパッとしないかもしれませんが、コードを一つづつ追っていくと、
入門としてのクロージャは簡単に理解できます。

#スコープ

まずJavaScriptは関数ごとにスコープが作られます。
スコープとは変数を参照できる範囲のことです。
その範囲外では変数は参照できません。

function func() {
  var value = 1;
  console.log(value);
}
func(); // 1
console.log(value); // undefined

#クロージャの例

ここでクロージャの例を見てみましょう

function func() {
  var value = 1;

  function innerFunc() {
    console.log(value);
  }
  innerFunc();
}
func(); // 1

先ほどの定義を思い出してみましょう。
「自分を囲むスコープにある変数を参照できる関数」

内側の関数が外側の関数の変数を参照できています。
ここで重要なのは、値のコピーではなく、参照ができていることです。

ですから、ここでは下記のようにvalueの変更が可能です。

function func() {
  var value = 1;

  function innerFunc() {
    value++;
  }
  innerFunc();
  console.log(value); // 2
}
func();

#クロージャの実践例
ここで基本的なクロージャの実践例として一つ、
「モジュールパターン」を紹介します。

クロージャの一つの利点として、
変数をプライベートな変数として扱う事ができるようになります。

var module = (function() {
  var count = 0;

  return {
    increment: function() {
      count++;
    },
    show: function() {
      console.log(count);
    }
  };

})();

module.show(); // 0

module.increment();
module.show(); // 1

console.log(count); // undefined

即時関数を用いてオブジェクトを生成しています。
moduleにはreturnされているオブジェクトが代入されます。

ここで重要な事として、
即時関数内のcountに関しては内側からしか参照できないという事です。
外側からアクセスしようとした場合にはもちろん「undefined」となります。

これによりプライペードな変数として扱う事が可能になります。

外部アカウント

技術情報のみつぶやくアカウント作成しました。JavaScriptは最新情報も追っていきます。
[Twitterはこちら]
(https://twitter.com/takeharumikami)
[Feedlyのフォローはこちら]
(http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fqiita.com%2Ftakeharu%2Ffeed)

JavaScriptでクロージャ入門。関数はすべてクロージャ？

外部アカウント

おすすめの記事