javascript クロージャの簡単な使い方
- 作成日 2021.03.07
- 更新日 2022.08.08
- javascript
- javascript
javascriptで、クロージャの簡単な使い方を記述してます。ブラウザはchromeを使用しています。
環境
- OS windows10 pro 64bit
- Apache 2.4.43
- ブラウザ chrome 103.0.5060.134
クロージャ使用
javascriptでは以下のように、関数の戻り値をローカル変数にすると、その値を変数に保持することができます。
'use strict';
function add() {
let count = 0;
return function () {
count++;
console.log(count);
}
}
const obj1 = add();
const obj2 = add();
obj1(); // 1
obj1(); // 2
obj1(); // 3
obj2(); // 1
obj2(); // 2
上記のコードの結果を確認すると、add関数内にある変数「count」を、それぞれの変数に保持した関数から変更された結果が参照できていることがわかります。
モジュールパターン
また、以下のようなデータを安全に保つ、モジュールパターンとして、クロージャは利用されます。
'use strict';
const hoge = (function () {
let count = 0;
const add = function () {
count++;
};
const disp = function () {
console.log(count);
};
return {
add: add,
disp: disp
};
})();
hoge.add();
hoge.disp(); // 0
hoge.add();
hoge.disp(); // 1
以下のように、countには「hoge.count」でアクセスすることはできません。
console.log(hoge.count);
// undefined
-
前の記事
React.js ライブラリ「react-cool-form」を使ってフォームのバリデーションを実装する 2021.03.06
-
次の記事
Vue3 ライブラリ「@vueform/multiselect」を使用して複数選択可能なセレクトボックスを実装する 2021.03.07
コメントを書く