実際のプロジェクトで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().

実際、この栗は非常に優れています。 simple では、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); は、setTimeout 1000 ミリ秒後に、クロージャ関数が 3 を 3 回出力したことがわかりました。 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 サイトの他の関連記事に注目してください。

推奨読書:

ウェブサイトビルダー VuePress の使用方法

VuePress を使用してウェブサイトを生成する方法

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