1

私は現在、JavaScriptの読み上げを終えています。http://www.w3schools.com/js/js_function_closures.aspで、JavaScript のクロージャーに関する章 (「プライベート変数」を許可するため) に参加しています。

例はカウンターです：

<!DOCTYPE html>
<html>
<body>

<p>Counting with a local variable.</p>

<button type="button" onclick="myFunction()">Count!</button>

<p id="demo">0</p>

<script>
var add = (function () {
    var counter = 0;
    return function () {return counter += 1}
})()

function myFunction(){
    document.getElementById("demo").innerHTML = add();
}
</script>

</body>
</html>

自己呼び出し関数を使用してカウンターを 0 に1 回設定し、add() の反復ごとにカウンターを 1 ずつインクリメントすると述べています。ただし、関数を自己呼び出しするために使用される中かっこが、counter = 0カウンターをインクリメントする関数と関数の両方を囲んでいることがコードでわかります。両方のコマンドが自己呼び出し関数内にどのように正確に配置できるかを視覚化するのは難しいですが、一方は 1 回だけ実行され、もう一方は反復ごとに実行されます。

4

1 に答える 1

9

この問題を分解してみましょう:

(1) 

 var add = (function () {
        var counter = 0;
        return function () {return counter += 1;}
    })();

最初の部分は自己呼び出し匿名関数addです。これは、この関数の実行結果を受け取ることを意味します。この場合、次の無名関数に他なりません:

function () {return counter += 1;}   (2)

したがって、これは add が関数になることを意味します!

ここで面白いのは、siaf (1) (自己呼び出し匿名関数) 内で、ゼロに初期化されたカウンター変数を宣言していることです。

var counter = 0;

counter は (2) の外側のスコープに属しているため、(2) はそれにアクセスできます!

JavaScript によると、作成された関数はその環境をキャプチャして永続化するため、クロージャ (クローズ オーバー) は関数とその作成環境の組み合わせに他なりません。つまり、return ステートメントの後、(2) への参照を保持する add 関数は、最初は 0 に設定されているカウンター変数に引き続きアクセスできます。

したがって、カウンターをインクリメントするには、インクリメント (2) が必要です。これは、次のように加算をインクリメントすることを意味します。

add();

ps : Function コンストラクターで作成され、(2) と同じ方法で返される関数は、カウンター変数をキャプチャしません!!

于 2014-06-17T21:03:56.483 に答える