jsクロージャの使い方の詳しい説明

今回は、js クロージャーの使用について詳しく説明します。js クロージャーを使用する際の 注意事項 は何ですか?実際のケースを見てみましょう。

クロージャは関数とその関数が宣言された語彙環境の組み合わせです

クロージャの最初の例

function init() {
 var name = 'Mozilla'; // name is a local variable created by init
 function displayName() { // displayName() is the inner function, a closure
 alert(name); // use variable declared in the parent function 
 }
 displayName(); 
}
init();
because inner functions have access to the variables of outer functions, displayName() can access the variable name declared in the parent function, init().

実際、この栗のdisplayName()は内部のクロージャ関数です。 init() で、なぜ外部で定義された変数名を displayName 内で呼び出すことができるのでしょうか? それは、js

内部関数

が外部関数の変数を取得する権限を持っているからです。

2番目の例

var data = [
 {'key':0},
 {'key':1},
 {'key':2}
];
function showKey() {
 for(var i=0;i<data.length;i++) {
   setTimeout(function(){
    //console.log(i); //发现i输出了3次3
   //console.log(this); // 发现 this 指向的是 Window
   data[i].key = data[i].key + 10;
   console.log(data[i].key)
   }, 1000);
 }
}
showKey();

上記の例は、10 11 12を正しく出力できますか?

答えは次のとおりです: いいえ、

構文エラーも報告されます

....console.log(i); は 3 を 3 回出力していることがわかりました。つまり、setTimeout 1000 ミリ秒後、実行は終了します 関数をラップすると、

for ループ

の実行が終了し、i は固定値となり、期待した効果が得られません。 console.log(this); は、これが Window を指していること、つまり、関数内に実装されたクロージャ関数が

グローバル関数

に変換され、メモリに格納されていることがわかりました。 そのため、別の実行関数を定義する必要があります

var data = [
 {'key':0},
 {'key':1},
 {'key':2}
];
function showKey() {
 var f1 = function(n){
  data[i].key = data[i].key + 10;
  console.log(data[i].key)
 }
 for(var i=0;i<data.length;i++) {
   setTimeout(f1(i), 1000);
 }
}
showKey();
// 得到预期的 10 11 12

この記事のケースを読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:

Vue カスタム動的コンポーネントの使用方法の詳細な説明

js でタイムシェアリング関数を使用する手順の詳細な説明

以上がjsクロージャの使い方の詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。