JavaScript - クロージャー

公開日:2018-11-29

1. 概要

クロージャーは、プロパティとメソッドを1つ持ったクラスのようなものです。
通常、関数内で定義された変数は、関数が終了すると破棄されますが、
どこかでその変数を参照している場合は、関数を抜けても破棄されずに保持されます。
これを利用して、特定の関数専用のグローバル変数を減らすことができます。

2.1 クロージャーを使わない場合

count がどこからでもアクセスできるため、間違って使われると、counter() の値がずれます。

ソース
var count = 0;

function counter() {
  return ++count;
}

console.log( counter() ); //1
count++;                  //間違って使われると、ここから値がずれる
console.log( counter() ); //3
console.log( counter() ); //4

2.2 クロージャーを使う場合

外部から count を参照することができないため、誤って使われることがなくなります。
最初に呼び出す関数(getCounter)は、コンストラクタとしての初期化処理を行うことができます。

ソース
function getCounter() {
  var count = 0;
  
  return function() {
    return ++count;
  }
}

var counter = getCounter();
console.log( counter() ); //1
//count++;                //エラー。count は宣言されていないと言われる
console.log( counter() ); //2
console.log( counter() ); //3

2.3 オブジェクトを使う場合

JavaScript の場合、関数に動的にプロパティを追加できるため、
クロージャーを使わない方がシンプルに書けます。
但し、毎回 if が実行されていることに注意してください。

ソース
var counter = function () {
  if (this.count == undefined) this.count = 0;
  return ++this.count;
}
console.log( counter() ); //1
console.log( counter() ); //2
console.log( counter() ); //3