1 分で JavaScript のクロージャを理解できます-jsチュートリアル-php.cn

1 分で JavaScript のクロージャを理解できます

黄舟

リリース： 2017-02-23 13:33:50

オリジナル

953 人が閲覧しました

クロージャとは何ですか？

まずコードを見てみましょう:

function a(){
    var n = 0;
    function inc() {
        n++;
        console.log(n);
    }
    inc();  
    inc(); 
}
a(); //控制台输出1，再输出2

ログイン後にコピー

簡単です。もう一度コードを見てみましょう:

function a(){
    var n = 0;
    this.inc = function () {
        n++; 
        console.log(n);
    };
}
var c = new a();
c.inc();    //控制台输出1
c.inc();    //控制台输出2

ログイン後にコピー

それは簡単です。

クロージャって何ですか？これで閉店です！

別の関数のスコープ内の変数にアクセスできる関数はクロージャです。ここで、inc 関数はコンストラクター a 内の変数 n にアクセスするため、クロージャが形成されます。

もう一度コードを見てみましょう:

function a(){
    var n = 0;
    function inc(){
       n++; 
       console.log(n);
    }
    return inc;
}
var c = a();
c();    //控制台输出1
c();    //控制台输出2

ログイン後にコピー

それがどのように実行されるかを見てみましょう:

var c = couter()、この文 couter() は関数 inc を返します、この文は var c = inc と同等です;

c ()、この文は inc(); と同等です。関数名は単なる識別子 (関数へのポインタ) であり、() は実行関数であることに注意してください。

次の3文の訳は、 var c = inc; inc(); ですが、最初のコードとは違いますか？いいえ。

クロージャって何ですか？これで閉店です！

教科書のチュートリアルはすべて、最後の段落を使ってクロージャを説明することを好みますが、これが問題を複雑にしていると思います。ここで返されるのは関数名です。Tan Haoqiang の C/C++ プログラミングを見たことがない学生には、() を使用する場合と使用しない場合の違いがすぐには分からないかもしれません。つまり、この記述方法には独自の罠があります。この書き方はより洗練されていますが、それでも問題を単純化したいと思います。コード 1 とコード 2 を見てください。それでも関数呼び出しに苦労しますか? n の値に苦労しますか?

なぜこのように書くのですか？

js の各関数は小さな暗い部屋であり、外部の情報を取得できますが、外部の世界から内部の内容を直接見ることはできません。変数 n を小さな黒い部屋に置きます。 inc 関数を除いて、変数 n にアクセスする方法はありません。また、関数 a の外で同じ名前の変数 n を定義しても、これはいわゆる拡張です。「カプセル化」。

関数識別子incを返すのにreturnを使っているのは、inc関数はa関数の外で直接呼び出すことができないので、return incを外にリンクしているためで、これもコード2でincを外にリンクしています。

よくあるトラップ

これを見てください:

function createFunctions(){
    var result = new Array();
    for (var i=0; i < 10; i++){
        result[i] = function(){
            return i;
        };
    }
    return result;
}
var funcs = createFunctions();
for (var i=0; i < funcs.length; i++){
    console.log(funcs[i]());
}

ログイン後にコピー

一見、0~9を出力すると思っていましたが、10 10を出力するとは思いませんでしたか?

ここでの罠は、()が付いた関数が実行関数だということです！ var f = function() {alert(‘Hi’); のような単純な文は、その後に f(); が続く場合にのみウィンドウを表示します。上記のコードの翻訳は次のとおりです:

var result = new Array(), i;
result[0] = function(){ return i; }; //没执行函数，函数内部不变，不能将函数内的i替换！
result[1] = function(){ return i; }; //没执行函数，函数内部不变，不能将函数内的i替换！
...
result[9] = function(){ return i; }; //没执行函数，函数内部不变，不能将函数内的i替换！
i = 10;
funcs = result;
result = null;

console.log(i); // funcs[0]()就是执行 return i 语句，就是返回10
console.log(i); // funcs[1]()就是执行 return i 语句，就是返回10
...
console.log(i); // funcs[9]()就是执行 return i 语句，就是返回10

ログイン後にコピー

なぜ結果だけが収集され、私は収集されないのですか? i はまだ関数によって参照されているためです。レストランと同じように、皿の数には限りがあるため、ウェイターは空の皿を集めるためにテーブルを巡回しますが、野菜がまだ入っている皿を集めることができますか? もちろん、皿の上の皿を手動で空にすると（= null）、皿は取り去られます。これは、いわゆるメモリリサイクルのメカニズムです。

i の値がどのように保持されるかについては、実際のところ、記事の最初から最後まで読んだ後では、何も心配する必要はありません。皿の上の料理は一切れ食べたら欠けてもいいのではないか？

まとめると

Closureは、別の関数の変数を参照する関数であり、変数は参照されるため再利用されないため、プライベート変数をカプセル化するために使用できます。これは長所でもあり、短所でもあります。不必要なクロージャはメモリ消費量を増やすだけです。さらに、クロージャを使用する場合、変数は静的なプライベート変数に似ているため、変数の値が要件を満たしているかどうかにも注意する必要があります。クロージャは通常、さまざまな事柄と混同されていますが、ここでは基本的な事項について説明するためのほんの始まりにすぎません。

上記を読むと、JavaScript クロージャの内容を理解するのに 1 分かかります。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。