JavaScript クロージャーの解析 (コード付き)

この記事の内容は JavaScript クロージャの解析 (コード付き) です。一定の参考価値があります。困っている友人は参考にしてください。お役に立てれば幸いです。

クロージャは、別の関数のスコープ内の変数にアクセスできる関数です。クロージャを作成する一般的な方法は、別の関数の中に関数を作成することです。クロージャを理解する前に、まず変数スコープを理解する必要があります

変数スコープ: グローバル変数とローカル変数
1. グローバル変数
はグローバル変数で直接定義されます。スコープ 変数

var name='Fakin';
function getName(){
  alert(name)
}
getName()//'Fakin'

と関数は、関数内で直接定義されたグローバル変数

2 とローカル変数
変数を直接読み取ることができます (ES6 より前では、JS にはブロックレベルのスコープがありませんでした) .)

function getName(){
  var name='Fakin';
}
alert(name)//undefined

クロージャ
これら 2 つのことを理解した後、クロージャとは何かを見てみましょう。

質問 1: クロージャとは何ですか? 上記にはたくさんのことが述べられていますが、理解できません?
回答: 私の個人的なクロージャの理解は、他の関数の内部変数を読み取ることができる関数です。

質問 2: クロージャの使用方法
回答: 関数の中に関数を作成し、その中に関数を作成します。 function 前の関数の変数を参照し、最後にこの関数の戻りについて説明します。非常に複雑ではありませんか? ここに例を示します

function f1(){
　　　　var n=999;
　　　　nAdd=function(){n+=1}
　　　　function f2(){
　　　　　　alert(n);
　　　　}
　　　　return f2;
　　}
　　var result=f1();
　　result(); // 999
　　nAdd();
　　result(); // 1000

上の例では、f2 がクロージャ関数です。関数 f2が f1 で返され、最後に f1 が result に割り当てられます。result は 2 回実行され、結果は望んでいたものでした。これは、クロージャ内で f2 が f1 の変数 'n' を引用符で囲んでいることが証明されましたが、'n' は存在しませんでした。 f1 が実行された後、メモリ内で破棄されるため、JS では、関数の実行後に変数が他の場所から参照されていない場合、その変数は自動的に破棄されることを誰もが知っているはずです。

クロージャを使用する際の注意事項

1: クロージャを使用すると関数内の変数がメモリに格納されるため、メモリ使用量が大きくなり、レンダリングが停止するなどの原因で、ブラウザの動作が遅くなり、IE ブラウザでメモリ リークやその他の問題が発生する可能性もあります。
2: 子関数はクロージャ内で親関数の変数を参照するため、子関数は親関数の変数を変更してください。親関数の変数の値を勝手に変更しないでください。

考えられる質問

function count() {
    var arr = [];
    for (var i=1; i<=3; i++) {
        arr.push(function () {
            return i * i;
        });
    }
    return arr;
}

var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];
f1(); // 16
f2(); // 16
f3(); // 16

f1 f2 f3 はすべて同じ値を返すのはなぜですか、私たちが望んでいることではありませんか？では、どうしてクロージャで解決できないのでしょうか？
これは実際には非常に簡単です。クロージャに必要なコードはあと 2 行だけです

function count() {
    var arr = [];
    for (var i=1; i<=3; i++) {
        arr.push((function (n) {
            return function () {
                return n * n;
            }
        })(i));
       //在自执行函数中把i传入相当于这个自执行函数的参数绑定了i，
       //当每次循环的时候不管变量怎么更改，这个函数的参数不会更改，所以返回咱们想要的结果
    }
    return arr;
}

var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];

f1(); // 1
f2(); // 4
f3(); // 9

以上がJavaScript クロージャーの解析 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。