Misteri Penutupan dalam JavaScript!

Pada pandangan pertama, penutupan mungkin kelihatan seperti konsep yang rumit, tetapi jangan risau ia lebih mudah daripada yang kelihatan! Mari buang kekeliruan dan atasi beberapa mitos biasa tentang penutupan.

Mitos Biasa Mengenai Penutupan

❌ Penutupan ialah fungsi khas dengan akses kepada skop sekelilingnya.
Tidak benar

• Penutupan tidak sama dengan fungsi.
• Dalam JavaScript, setiap fungsi sememangnya mempunyai akses kepada skop yang ditakrifkan. Beginilah cara fungsi berfungsi!

❌ Penutupan memerlukan fungsi bersarang.
Salah lagi

• Fungsi bersarang tiada kaitan dengan membuat penutupan.
• Apabila fungsi dicipta, ia secara automatik membentuk penutupan dengan skop sekelilingnya, tiada sarang diperlukan.

Apa Itu Realiti❓

Penutupan bukanlah ciri ajaib atau unik. Sebaliknya, ia hanyalah gabungan fungsi dan pembolehubah daripada skop di mana fungsi itu dicipta. Setiap fungsi disertakan dengan konteks ini—anggaplah ia sebagai ingatan tentang asal usulnya.

Berikut ialah takrifan yang diluluskan oleh MDN:

Penutupan ialah gabungan fungsi yang digabungkan bersama dengan rujukan kepada keadaan sekelilingnya.

Dalam bahasa Inggeris biasa, penutupan membolehkan fungsi anda "mengingat" pembolehubah dari tempat ia dicipta, walaupun ia dilaksanakan di tempat lain.

Mari Lihat Penutupan dalam Tindakan ???

Berikut ialah contoh kecil yang menyeronokkan:

function createCounter() {
    let count = 0; // This is the surrounding state

    return function() { // The inner function
        count++; 
        return count;
    };
}

const counter = createCounter(); // Create a counter instance
console.log(counter()); // Output: 1
console.log(counter()); // Output: 2
console.log(counter()); // Output: 3

Apa Yang Berlaku Di Sini? ?
Apabila createCounter dipanggil, kiraan pembolehubah dibuat dalam skopnya.
Fungsi yang dikembalikan mengingati kiraan, walaupun createCounter telah pun selesai dijalankan.
Setiap kali kaunter dipanggil, ia boleh mengakses dan mengemas kini kiraan kerana penutupan.

Mengapa Penutupan Penting? ?

Penutupan bukan sekadar konsep teori untuk temu duga acing—ia sangat berguna! Berikut ialah beberapa senario dunia sebenar:

1. Privasi Data

Penutupan boleh memastikan pembolehubah peribadi dan tidak boleh diakses dari dunia luar.

function secretMessage() {
    let message = "This is a secret!";
    return function() {
        return message; // Only this function can access the variable
    };
}

const getMessage = secretMessage();
console.log(getMessage()); // Output: "This is a secret!"
console.log(message); // Error: message is not defined

2. Pengendali Acara

Penutupan berguna untuk pendengar acara apabila anda ingin "mengingat" beberapa keadaan.

function greetUser(username) {
    return function() {
        console.log(`Hello, ${username}!`);
    };
}

const greetJohn = greetUser("John");
document.getElementById("myButton").addEventListener("click", greetJohn);
// Even after greetUser is done, greetJohn remembers "John"

3. Permohonan Separa

Penutupan membolehkan anda pratetapkan argumen untuk sesuatu fungsi.

function multiply(a) {
    return function(b) {
        return a * b; // "a" is remembered
    };
}

const double = multiply(2);
console.log(double(5)); // Output: 10
console.log(double(10)); // Output: 20

Tunggu, Adakah Penutupan Sempurna❓

Bukan selalu! Jika anda tidak berhati-hati, penutupan boleh menyebabkan kebocoran memori dengan menyimpan rujukan kepada pembolehubah lebih lama daripada yang diperlukan. Contohnya, apabila penutupan digunakan di dalam gelung, mudah untuk mencipta gelagat yang tidak diingini:

function createCounter() {
    let count = 0; // This is the surrounding state

    return function() { // The inner function
        count++; 
        return count;
    };
}

const counter = createCounter(); // Create a counter instance
console.log(counter()); // Output: 1
console.log(counter()); // Output: 2
console.log(counter()); // Output: 3

Untuk membetulkannya, anda boleh menggunakan let (skop blok) atau IIFE:

function secretMessage() {
    let message = "This is a secret!";
    return function() {
        return message; // Only this function can access the variable
    };
}

const getMessage = secretMessage();
console.log(getMessage()); // Output: "This is a secret!"
console.log(message); // Error: message is not defined

Membungkusnya ???

Penutupan ada di mana-mana dalam JavaScript. Sama ada anda sedar atau tidak, anda sudah menggunakannya! Ia adalah sos rahsia yang menjadikan JavaScript berkuasa dan fleksibel.

Inilah Perkara yang Perlu Diingati: ?

• Penutupan bukan fungsi; ia adalah fungsi pembolehubah yang diingati.
• Setiap fungsi dalam JavaScript mempunyai penutupan.
• Gunakan penutupan untuk enkapsulasi, pengendalian acara, aplikasi separa dan banyak lagi.

Terima kasih kerana membaca. ?
Selamat Mengekod! ???✨

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