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