Cara fungsi penutupan JavaScript mengakses petua variables_javascript luaran

Penutupan merujuk kepada fungsi yang mempunyai hak untuk mengakses pembolehubah dalam skop fungsi lain Walau bagaimanapun, terdapat satu perkara yang perlu diambil perhatian tentang mekanisme konfigurasi skop, iaitu penutupan hanya boleh mendapatkan nilai terakhir mana-mana. pembolehubah dalam fungsi yang mengandungi.

Seperti kes berikut:

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 />");    
}

Hasil pelaksanaan:

Pada permukaan, nampaknya nilai i yang dikembalikan oleh setiap fungsi adalah berbeza. Contohnya, nilai c_arr[0] hendaklah 0, nilai c_arr[1] hendaklah 1, dan seterusnya. Akibatnya, setiap fungsi mengembalikan 10. kenapa?

Oleh kerana objek aktif fungsi create() disimpan dalam rantai skop setiap fungsi, kesemuanya merujuk kepada pembolehubah yang sama i. Apabila gelung for tamat, nilai i menjadi 10. Pada masa ini, setiap fungsi merujuk kepada objek pembolehubah yang sama yang memegang pembolehubah i.

Kami boleh memaksa penutupan untuk berkelakuan seperti yang diharapkan dengan mencipta satu lagi fungsi nama domain supaya setiap kedudukan sepadan dengan nilai yang sepadan.

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 />");    
}

Hasil pelaksanaan:

Fungsi tanpa nama ditakrifkan, dan mekanisme untuk melaksanakan fungsi tanpa nama diperuntukkan kepada tatasusunan dengan serta-merta Fungsi tanpa nama di sini mempunyai nombor parameter, iaitu nilai yang akan dikembalikan oleh fungsi akhir. Kami lulus dalam pembolehubah i apabila memanggil setiap fungsi. Oleh kerana parameter fungsi diluluskan mengikut nilai, nilai semasa pembolehubah i akan diberikan kepada nombor parameter. Di dalam fungsi tanpa nama ini, penutupan yang mengakses num dibuat dan dikembalikan Dengan cara ini, setiap fungsi dalam tatasusunan arr mempunyai salinan pembolehubah numnya sendiri, jadi ia boleh mengembalikan nilai yang berbeza.

Contoh klasik

Mari lihat contoh klasik sekali lagi Andaikan bahawa halaman tersebut mempunyai set tag butang Kami menggunakan skrip untuk mengikat peristiwa klik pada set tag butang ini dan apabila diklik, bilangan teg yang akan muncul.

<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>

Klik setiap keputusan butang

Di permukaan, nampaknya mengklik setiap label akan muncul nombor yang berbeza

Yang pertama harus muncul dengan 0;

Yang kedua harus muncul dengan 1;

Dan seterusnya.

Tetapi hasilnya ialah semua butang muncul 4, yang jelas bukan hasil yang kita inginkan.

Jom tukar program

<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>

Klik pada yang kedua

Klik pada yang keempat

Kami hanya perlu mencipta fungsi tanpa nama dalam fungsi tersebut, sama seperti kes di atas. Anda boleh melaksanakan fungsi tanpa nama untuk menangkap pembolehubah luaran i Akibatnya, nilai i bagi setiap bom butang adalah berbeza.