JavaScriptのクロージャが値を保持する仕組み

Question

JavaScriptのクロージャが値を保持する仕組みがよくわかりません

function outer(n) {
    var cnt = n;
    function inner() { 
        return ++cnt;
    }
  return inner;
}

var f = outer(0);
console.log(f()); => 1
console.log(f()); => 2
console.log(f()); => 3

スコープチェーンについては理解できているはずなのですが、なぜスコープチェーンを使って値を保持することができるのでしょうか？

Comments

[kei344]

「チューン」ではなく「チェーン」では。

[qwefrg]

チェーンですね。指摘ありがとうございます

Answer 1

ガベージコレクション(Garbage Collection)

クロージャを理解するには「スコープチェーン」の他に「ガベージコレクション」を理解する必要があります。

function plus (n) {
  return ++n;
}

console.log(plus(0)); // 1
console.log(plus(0)); // 1

ごく簡単な静的関数です。
ガベージコレクションによってどこからも参照されなくなった変数は自動的にメモリから解放されます。
従って、変数 n はメモリから解放されるわけです。

function outer(n) {
    var cnt = n;
    function inner() {
        return ++cnt;
    }
  return inner;
}

var f = outer(0);
console.log(f()); => 1
console.log(f()); => 2
console.log(f()); => 3

今度は少し、複雑です。

1. outer(0) 実行される
2. 変数 cnt は 関数 inner() によって参照され続ける為、ガベージコレクションによってメモリから解放されない
3. f() によって、関数 inner() が呼びされる
4. スコープチェーンの原則によって、上位スコープに存在する変数 cnt が参照される (2. の時点でメモリから解放されなかった為、1. で代入していた 0 が格納されている)
5. ++cnt によって、インクリメントされ、1 を返す

Re: qwefrg さん

Answer 2

参照される可能性のある変数は参照可能な形で保持されていることが期待されます。
そのため、innerのスコープ中で変数の内容を保存しています。

保存の状況は下記のように確認できるかと思います。

f.prototype

![

Answer 3

JavaScriptのクロージャが値を保持する仕組みがよくわかりません

var f = outer(0); は単に関数 inner への参照を変数 f に代入しているだけではなく、outer が呼び出されるときに execution context を生成しています。それに outer 内で定義した変数 cnt を保持し、それに関数 inner を通じてアクセスしているということになっているはずです。

クロージャーは、オブジェクト指向言語ではない JavaScript でカプセル化するときの手段の一つとして用いられるそうです。

オブジェクト指向言語の class をコンストラクタで初期化してインスタンスを生成し、その private メンバーの変数 cnt に public メンバーのメソッド inner でアクセスするのと同等といった感じです。