Penutupan JavaScript: Panduan Pemula

Penutupan ialah ciri penting yang berkuasa dalam JavaScript yang dihadapi oleh ramai pemula. Mereka bertanggungjawab untuk beberapa ciri JavaScript yang paling berguna, seperti menyimpan keadaan merentas panggilan fungsi dan mencipta pembolehubah peribadi. Blog ini cuba menerangkan penutupan dengan memecahkannya ke dalam bahasa yang mudah dan membincangkan kepentingannya bersama-sama dengan contoh praktikal.

? Apakah Penutupan?

Apabila fungsi dikembalikan daripada fungsi lain dalam JavaScript, ia mewarisi skop fungsi induk. Ini bermakna bahawa fungsi yang dikembalikan boleh mengakses pembolehubah yang ditakrifkan dalam skop fungsi luar walaupun selepas fungsi luar telah menyelesaikan pelaksanaan. Penutupan ialah gabungan fungsi dan skop penutupnya.
Berikut ialah definisi yang lebih mudah:

• Penutupan ialah fungsi yang "mengingat" pembolehubah daripada skop fungsi luar (menyertakan).
• Ia membolehkan fungsi dalaman mengakses pembolehubah ini walaupun fungsi luar tidak lagi dilaksanakan.

? Cara Penutupan Berfungsi: Satu Contoh

? Contoh tanpa Penutup

function outer(){
    let counter = 0
    function inner(){
        counter++
        console.log("counter = " + counter)
    }
    inner()
}
outer()
outer() 
/* Output:
counter = 1
counter = 1 */

? Contoh dengan Penutupan

function outer(){
    let counter = 0
    function inner(){
        counter++
        console.log("counter = " + counter)
    }
    return inner
}
const fn = outer()
fn()
fn()
/* Output:
counter = 1
counter = 2 */

? Ciri-ciri Utama Penutupan

1. Memori Berterusan: Pembolehubah dalam skop fungsi luar "diingati" lama selepas fungsi luar keluar.
2. Skop Leksikal: Penutupan adalah berdasarkan tempat fungsi ditakrifkan, bukan tempat ia dilaksanakan.
3. Berbilang Kejadian: Setiap tika penutupan menyimpan salinan pembolehubah luarnya sendiri.

? Contoh dengan Berbilang Kejadian:

function counterFunction() {
    let count = 0;

    return function increment() {
        count++;
        return count;
    };
}

const counter1 = counterFunction();
const counter2 = counterFunction();

console.log("counter1 = " + counter1()); // Output: 1
console.log("counter1 = " + counter1()); // Output: 2
console.log("counter2 = " + counter2()); // Output: 1
console.log("counter1 = " + counter1()); // Output: 3
console.log("counter2 = " + counter2()); // Output: 2

Di sini, kaunter1 dan kaunter2 masing-masing mempunyai pembolehubah kiraan tersendiri.

? Penggunaan Praktikal Penutupan

1️⃣ Privasi Data: Penutupan boleh menyembunyikan pembolehubah daripada skop global, jadi ia hanya tersedia dalam fungsi tertentu.
? Contoh:

function secretInfo() {
    let secret = "I love JavaScript";
    return {
        getSecret: function() {
            return secret;
        },
        setSecret: function(newSecret) {
            secret = newSecret;
        }
    };
}

const secretObject = secretInfo();
console.log(secretObject.getSecret()); // Output: I love JavaScript
secretObject.setSecret("I love Python too!");
console.log(secretObject.getSecret()); // Output: I love Python too!
secretObject.setSecret("I love PHP too!");
console.log(secretObject.getSecret()); // Output: I love PHP too!
// Attempting to Access secret Directly will not work
console.log(secretObject.secret); // Output: undefined

✍️ Cara Kod Ini memaparkan Privasi Data:

1. Perlindungan Skop Global: Rahsia pembolehubah tidak boleh diakses terus daripada skop global atau mana-mana bahagian lain kod. Contohnya, jika anda mencuba console.log(secretObject.secret), ia akan kembali tidak ditentukan.
2. Penyelenggaraan Negeri Persendirian: Rahsia pembolehubah penutupan adalah peribadi dan hanya boleh dibaca atau diubah suai menggunakan kaedah getSecret dan setSecret.
3. Akses Terkawal: Program ini memastikan akses terhad kepada pembolehubah rahsia dengan mentakrifkan fungsi getSecret dan setSecret.

2️⃣ Kilang Fungsi: Sebuah kilang fungsi ialah fungsi yang menjana dan mengembalikan fungsi baharu. Ia membolehkan kami membina kefungsian tersuai secara dinamik berdasarkan parameter input.
? Contoh:

function outer(){
    let counter = 0
    function inner(){
        counter++
        console.log("counter = " + counter)
    }
    inner()
}
outer()
outer() 
/* Output:
counter = 1
counter = 1 */

✍️ Cara Kod Ini mempamerkan Kilang Fungsi:

1. Fungsi kira berfungsi seperti kilang, menghasilkan fungsi pengganda khusus (berganda, tiga kali ganda) berdasarkan input (faktor).
2. Setiap fungsi adalah unik dan bebas sambil berkongsi logik teras yang sama.

3️⃣ Pendengar Acara: Penutupan biasanya digunakan dalam panggilan balik dan pendengar acara untuk mengekalkan keadaan.
? Contoh:

function outer(){
    let counter = 0
    function inner(){
        counter++
        console.log("counter = " + counter)
    }
    return inner
}
const fn = outer()
fn()
fn()
/* Output:
counter = 1
counter = 2 */

✍️ Cara Kod Ini mempamerkan cara penutupan berfungsi dalam pendengar acara:

1. Fungsi setupListener mencipta penutupan dan mentakrifkan pembolehubah clickCount di dalamnya.
2. Fungsi pendengar acara, yang merupakan panggilan balik, mendapat akses kepada clickCount walaupun selepas kaedah setupListener telah selesai dilaksanakan.
3. Setiap kali butang dengan ID "myButton" diklik, panggilan balik pendengar acara akan menambah klikCount dan log nilai yang dikemas kini.

? Kesimpulan

Penutupan ialah idea asas dalam JavaScript, membolehkan pembangun membina kod yang lebih modular, cekap dan peribadi. Memahami penutupan memberi anda keupayaan untuk menulis fungsi dinamik, mengekalkan keadaan berterusan dan mencapai pengkapsulan data.

Sebagai pemula, luangkan masa berlatih dan bereksperimen dengan penutupan. Ia mungkin kelihatan sukar pada mulanya, tetapi dengan contoh dan penggunaan praktikal, anda akan menyedari kekuatan dan kepelbagaian luar biasa mereka dalam pengaturcaraan JavaScript tidak lama lagi.

Adakah terdapat sebarang analogi atau contoh kehidupan sebenar yang membantu anda mempelajari penutupan? Kongsi di bahagian komen di bawah!
Selamat mengekod! ✨

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