Javascriptでのクロージャの実用的な使用法は？

クロージャとは、関数と、その関数が宣言された字句環境の組み合わせです。

function outerFunc() {
   var name = "TutorialsPoint"; // name is a local variable created by outerFunc
   return function innerFunc() {
      // innerFunc() is the inner function, a closure
      console.log(name); // use variable declared in the parent function
   };
}
let f = outerFunc();
f()

externalFunc（）は、nameというローカル変数とinnerFunc（）という関数を作成します。 innerFunc（）関数は、outerFunc（）内で定義される内部関数であり、outerFunc（）関数の本体内でのみ使用できます。

innerFunc（）関数には、独自のローカル変数がないことに注意してください。ただし、内部関数は外部関数の変数にアクセスできるため、innerFunc（）は親関数で宣言された変数名outerFunc（）にアクセスできます。

outerFuncの実行が完了すると、その名前がスコープ外になっていることがわかります。しかし、よく見ると、返され、fに割り当てられたinnerFuncは、name変数にアクセスできます。したがって、inner funcは、outerFuncの字句スコープ上でクロージャを形成しました。

実用的な使用法

プライベートメソッドのエミュレート -Javaなどの言語は、メソッドをプライベートとして宣言する機能を提供します。つまり、同じクラスの他のメソッドからのみ呼び出すことができます。 JavaScriptはこれを行うためのネイティブな方法を提供していませんが、クロージャを使用してプライベートメソッドをエミュレートすることは可能です。

例

var counter = (() => {
   var privateCounter = 0;
   let changeBy = (val) => privateCounter += val;
   return {
      increment: () => changeBy(1),
      decrement: () => changeBy(-1),
      value: () => privateCounter
   };
})();
console.log(counter.value());
counter.increment();
counter.increment();
console.log(counter.value());
counter.decrement();
console.log(counter.value());

出力

0
2
1

イベントハンドラーで使用

for(let i = 0; i < 4; i++) {
   button = buttons[i]
   button.addEventListener("click", alert(i))
}

コレクションボタンに4つのボタンがあり、このようなイベントリスナーを追加しようとすると、それらのボタンをクリックすると、結果としてundefinedが表示されます。これは、それらが呼び出されるときに、iが定義されなくなるためです。これを回避する方法は、iにクロージャーを導入することです。

for(let i = 0; i < 4; i++) {
   button = buttons[i]
   button.addEventListener("click", () => alert(i))
}