JavaScript クロージャ関数が外部変数にアクセスする方法_JavaScript のヒント

クロージャは、別の関数のスコープ内の変数にアクセスする権利を持つ関数を指します。ただし、スコープ設定メカニズムに関して注意すべき点が 1 つあります。それは、クロージャは変数の最後の値しか取得できないということです。含まれる関数内の変数。

次のような場合:

function create(){
    var arr = new Array();  
 
    for (var i=0; i<10; i++){
        arr[i] = function(){
            return i;
        };  
    }
 
    return arr;
}
 
var c_arr = create();
 
for(var i=0; i<c_arr.length;i++){
    document.write("c_arr["+i+"] = "+c_arr[i]()+"<br />");    
}

実行結果:

表面上、各関数によって返される i 値は異なるように見えます。たとえば、c_arr[0] の値は 0、c_arr[1] の値は 1 である必要があります。その結果、各関数は 10 を返します。なぜ？

create() 関数のアクティブ オブジェクトは各関数のスコープ チェーンに格納されるため、すべて同じ変数 i を参照します。 for ループが終了すると、i の値は 10 になります。このとき、各関数は変数 i を保持する同じ変数オブジェクトを参照します。

各位置が対応する値に対応するように別のドメイン名関数を作成することで、クロージャが期待どおりに動作するように強制できます。

function create(){
    var arr = new Array();  
 
    for (var i=0; i<10; i++){
        arr[i] = function(num){
            return function(){
                return num; 
            };
        }(i);   
    }
 
    return arr;
}
 
var c_arr = create();
 
for(var i=0; i<c_arr.length;i++){
    document.write("c_arr["+i+"] = "+c_arr[i]()+"<br />");    
}

実行結果:

匿名関数が定義され、匿名関数を実行するメカニズムが配列にすぐに割り当てられます。ここでの匿名関数には、最終関数によって返される値であるパラメーター num があります。各関数を呼び出すときに変数 i を渡します。関数パラメータは値によって渡されるため、変数 i の現在の値がパラメータ num に割り当てられます。この無名関数内で、num にアクセスするクロージャが作成され、返されます。この方法で、arr 配列内の各関数は独自の num 変数のコピーを持つため、異なる値を返すことができます。

典型的な例

もう一度典型的な例を見てみましょう。ページに一連のボタン タグがあり、クリック イベントをこの一連のボタン タグにバインドし、クリックされるとどの数のタグがポップアップするかを想定します。

<meta charset="utf-8" />
 
<button>第一个</button>
<button>第二个</button>
<button>第三个</button>
<button>第四个</button>
 
 
<script type="text/javascript">
 
var obj = document.getElementsByTagName('button');
for(var i=0;i<obj.length;i++){
    obj[i].onclick = function(){
        alert(i);
    };  
}
 
</script>

各ボタンをクリックすると結果が表示されます

表面上は、各ラベルをクリックすると異なる番号がポップアップするように見えます

最初の値は 0 で表示されます。

2 番目は 1 でポップアップ表示されます;

など。

しかし、結果はすべてのボタンが 4 つポップアップするというもので、これは明らかに私たちが望む結果ではありません。

プログラムを変更しましょう

<meta charset="utf-8" />
 
<button>第一个</button>
<button>第二个</button>
<button>第三个</button>
<button>第四个</button>
 
 
<script type="text/javascript">
 
var obj = document.getElementsByTagName('button');
for(var i=0;i<obj.length;i++){
    obj[i].onclick = function(num){
        return function(){
            alert(num);
        }       
    }(i);       
}
 
</script>

2 番目をクリックしてください

4 番目をクリックしてください

上記の場合と同様に、関数内に匿名関数を作成するだけです。外部変数 i をキャプチャする無名関数を実装できます。その結果、各ボタン ボムの i 値は異なります。