JavaScript - クロージャー
公開日：2018-11-29
更新日：2019-05-11
更新日：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)は、コンストラクタとしての初期化処理を行うことができます。
最初に呼び出す関数(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 が実行されていることに注意してください。
クロージャーを使わない方がシンプルに書けます。
但し、毎回 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
