Memahami Penutupan dalam JavaScript

Penutupan ialah konsep asas dalam JavaScript yang boleh memberi kesan ketara kepada cara anda menulis dan memahami kod anda. Pada dasarnya, penutupan membenarkan fungsi untuk mengakses pembolehubah dari skop luarnya walaupun selepas fungsi luar itu selesai dilaksanakan. Keupayaan ini boleh menjadi sangat berkuasa, tetapi ia juga memerlukan pemahaman yang kukuh untuk digunakan dengan berkesan. Mari selami butirannya.

Apakah Penutupan?

Penutupan ialah fungsi yang menangkap persekitaran leksikal di mana ia dicipta. Ini bermakna bahawa fungsi mengekalkan akses kepada pembolehubah dari skop luarnya, walaupun selepas fungsi luar telah menyelesaikan pelaksanaan. Dalam JavaScript, penutupan dibuat setiap kali fungsi ditakrifkan dalam fungsi lain.

Contoh Asas

Untuk memahami penutupan, mari kita pertimbangkan contoh mudah:

function outerFunction() {
    let outerVariable = 'I am an outer variable';

    function innerFunction() {
        console.log(outerVariable); // Inner function can access the outer variable
    }

    return innerFunction;
}

const myClosure = outerFunction();
myClosure(); // Logs: "I am an outer variable"

Dalam contoh ini:

1. outerFunction mengisytiharkan pembolehubah tempatan outerVariable dan fungsi dalam innerFunction.
2. innerFunction log outerVariable, menunjukkan akses kepada pembolehubah luar.
3. outerFunction mengembalikan innerFunction, mewujudkan penutupan.
4. myClosure, yang memegang rujukan kepada innerFunction, masih mempunyai akses kepada outerVariable walaupun selepas outerFunction telah selesai.

Skop dan Penutup Leksikal

Skop leksikal JavaScript bermaksud bahawa skop fungsi ditentukan oleh tempat ia ditakrifkan, bukan tempat ia dipanggil. Penutupan mengeksploitasi mekanisme skop ini, membenarkan fungsi mengakses pembolehubah dari skop luarnya walaupun selepas fungsi luar telah kembali.

Contoh Praktikal: Pembolehubah Persendirian

Penutupan sering digunakan untuk mencipta pembolehubah persendirian, iaitu pembolehubah yang tidak boleh diakses dari luar fungsi yang mengandunginya:

function createCounter() {
    let count = 0;

    return {
        increment: function() {
            count++;
            return count;
        },
        decrement: function() {
            count--;
            return count;
        }
    };
}

const counter = createCounter();
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
console.log(counter.decrement()); // 1

Di sini:

1. createCounter memulakan kiraan dan mengembalikan objek dengan kaedah kenaikan dan pengurangan.
2. Kedua-dua kaedah membentuk penutupan yang menangkap dan mengubah suai kiraan, yang kekal peribadi.

Contoh Lanjutan: Iterator

Penutupan juga boleh digunakan untuk mencipta iterator stateful, yang mengekalkan keadaan dalaman merentas panggilan fungsi:

function createIterator(array) {
    let index = 0;

    return {
        next: function() {
            if (index < array.length) {
                return { value: array[index++], done: false };
            } else {
                return { value: undefined, done: true };
            }
        }
    };
}

const iterator = createIterator([1, 2, 3]);
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

Dalam contoh ini:

1. createIterator menangkap tatasusunan dan indeks dalam penutupan.
2. Kaedah seterusnya menggunakan indeks yang ditangkap untuk mengembalikan elemen tatasusunan satu demi satu.

Perangkap Biasa: Penutupan dalam Gelung

Penutupan kadangkala boleh menyebabkan tingkah laku yang tidak dijangka apabila digunakan di dalam gelung, terutamanya dengan operasi tak segerak. Berikut ialah contoh yang menunjukkan isu:

Menggunakan var

for (var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i);
    }, 1000);
}
// Logs: 5 5 5 5 5

Dalam kes ini:

1. Gelung selesai, dan saya akhirnya menjadi 5.
2. Semua panggilan balik setTimeout merujuk kepada i yang sama, iaitu 5.

Menggunakan let

for (let i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i);
    }, 1000);
}
// Logs: 0 1 2 3 4

Di sini:

1. mari buat i berskop blok baharu untuk setiap lelaran.
2. Setiap panggilan balik setTimeout menangkap i yang berbeza, menghasilkan output yang dijangkakan.

Ringkasan

• Penutupan: Fungsi yang mengingati dan boleh mengakses persekitaran leksikalnya.
• Skop Leksikal: Fungsi diskop berdasarkan tempat ia ditakrifkan, bukan dipanggil.
• Pembolehubah Peribadi: Penutupan boleh merangkum dan melindungi pembolehubah.
• Iterators: Penutupan boleh mengekalkan keadaan dan menyediakan akses berurutan kepada data.
• Gelung Perangkap: Berhati-hati dengan var dalam gelung dan lebih suka biarkan untuk mengelakkan tingkah laku yang tidak dijangka.

Memahami penutupan dan nuansanya akan meningkatkan keupayaan anda untuk menulis kod JavaScript yang lebih berkuasa dan boleh diselenggara. Gunakan prinsip ini dengan bijak dan anda akan dapat memanfaatkan penutupan untuk menyelesaikan masalah rumit dengan berkesan.

Ikuti saya di : Github Linkedin

Atas ialah kandungan terperinci Memahami Penutupan dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!