closure
以下の組をclosureと呼ぶ
関数
要は、関数が定義されたときに、
関数本体だけでなく、
関数が定義されたスコープも一緒に保持される
ちなみに、JavaScriptの関数はclosureとして作られる
この解説が一番わかりやすかったmrsekut.icon
例
code:js
function outer() {
let v = 'I am outside!';
function inner() {
console.log(v);
}
return inner;
}
const myClosure = outer();
myClosure(); // "I am outside!"
上記のコードは、以下の組がclosureになっているという例
関数inner
そのスコープ(outerの{..}の中)
(実際はouterもclosureになるが、この例では関係ない)
もし、上記の組がclosureでないならば、
outer()の実行が完了した時点で、変数vは用済みと判断されるはず
myClosureというのは定義的には、↓こうなるので、vは未定義な変数となるはず
code:js
function inner() {
console.log(v);
}
そして、↑これを呼ぶと、undefinedと出力されるはず
しかし、実際はvにアクセスでき、「"I am outside!"」と返ってくる
これは、innerという関数がclosureになっているため、
関数の部分だけでなく
code:js
function inner() {
console.log(v);
}
スコープも一緒に保持されているから
code:js
{
// ↓ここから
let v = 'I am outside!';
// inner
return inner;
// ↑ここまで
}
ReactではなくJavaScriptレベルの話ですが、関数内のローカル変数は関数の実行ごとに生成されます。そして、関数Aの内で別な関数Bを作成して、Bの中からAのローカル変数を参照すると、Aの実行によって生成された変数が、Bから使うためにAの終了後も生き残ることとなります。これが「クロージャ」です。ref