JavaScript - クロージャー

公開日：2018-11-29 更新日：2019-05-11

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


Tag

New Article