Bagaimana untuk Mengakses Pembolehubah Luar dalam Gelung Penutupan JavaScript?

Mengakses Pembolehubah Luar dalam Gelung daripada Penutupan JavaScript

Dalam JavaScript, apabila melelaran pada tatasusunan menggunakan gelung untuk, perkara biasa ditemui isu di mana nilai pembolehubah di dalam gelung sentiasa sama dengan lelaran terakhir. Ini timbul disebabkan oleh skop dan penutupan yang berubah-ubah.

Untuk menyelesaikan isu ini, teknik yang dipanggil penutupan boleh digunakan. Penutupan ialah fungsi yang mengembalikan fungsi, yang menangkap skop pembolehubah fungsi induk.

Pertimbangkan contoh berikut:

<code class="javascript">for (var i in this.items) {
    var item = this.items[i];
    $("#showcasenav").append("<li id=\"showcasebutton_" + item.id + "\"><img src=\"/images/showcase/icon-" + item.id + ".png\" /></li>");
    $("#showcasebutton_" + item.id).click(function() {
        alert(item.id);
        self.switchto(item.id);
    });
}</code>

Dalam kod ini, item pembolehubah berubah dengan setiap lelaran gelung. Apabila pengendali klik dipanggil, ia menggunakan nilai terakhir item.

Untuk menyelesaikannya, kita boleh menggunakan penutupan untuk menangkap skop pembolehubah gelung:

<code class="javascript">for (var i in this.items) {
    var item = this.items[i];
    $("#showcasenav").append("<li id=\"showcasebutton_" + item.id + "\"><img src=\"/images/showcase/icon-" + item.id + ".png\" /></li>");
    $("#showcasebutton_" + item.id).click(
        // create an anonymous function that will scope "item"
        (function(item) {
            // that returns our function
            return function() {
                alert(item.id);
                self.switchto(item.id);
            };
        })(item) // immediately call it with "item"
    );
}</code>

Di sini, kami membalut fungsi pengendali klik dalam fungsi lain yang menangkap skop item semasa lelaran gelung. Apabila pengendali klik dipanggil, ia menggunakan nilai item yang betul.

Pendekatan alternatif ialah menggunakan fungsi $.each() jQuery, yang secara automatik mencedok pembolehubah gelung, menghapuskan keperluan untuk penutupan:

<code class="javascript">$.each(this.items, function(i, item) {
    $("#showcasenav").append("<li id=\"showcasebutton_" + item.id + "\"><img src=\"/images/showcase/icon-" + item.id + ".png\" /></li>");
    $("#showcasebutton_" + item.id).click(function() {
        alert(item.id);
        self.switchto(item.id);
    });
});</code>

Atas ialah kandungan terperinci Bagaimana untuk Mengakses Pembolehubah Luar dalam Gelung Penutupan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!