Memahami penutupan JavaScript: pembolehubah, fungsi dan skop.

“Penutupan Javascript ialah konsep asas dalam pengaturcaraan, membolehkan fungsi mengakses dan memanipulasi pembolehubah daripada skop sekeliling. Teknik berkuasa ini membolehkan pengkapsulan data, pemeliharaan konteks dan pengurusan ingatan yang cekap. Memahami penutupan Javascript adalah penting untuk membangunkan aplikasi yang teguh, boleh skala dan boleh diselenggara. Dalam artikel ini, kita akan melihat kerumitan konsep ini, meneroka pembolehubah, fungsi dan skop untuk menguasai konsep Javascript yang penting ini.”.
Sekarang mari kita lihat apakah penutupan dalam Javascript. Saya ingin mentakrifkan ini dalam tiga cara: dengan cara yang mudah dan ringkas, dalam definisi teknikal dan terperinci, dan dalam definisi konsep dan analog.

Apakah penutupan dalam JavaScript?

“Penutupan ialah saluran yang melaluinya fungsi dalam fungsi lain mempunyai akses kepada skopnya sendiri dan skop fungsi luarnya, walaupun apabila fungsi luar telah kembali.”.

"Penutupan juga boleh dirujuk sebagai fungsi serba lengkap yang mengekalkan rujukan kepada skop leksikal di sekelilingnya, membenarkannya mengakses dan memanipulasi pembolehubah daripada skop itu, walaupun apabila fungsi itu digunakan di luar konteks asalnya." .

“Penutupan adalah seperti bilik dengan ingatan. Apabila fungsi dicipta di dalam fungsi lain, ia mewarisi skop fungsi luar, sama seperti bilik mewarisi ciri bangunan di dalamnya. Walaupun fungsi luar 'menutup' (kembali), fungsi dalam mengingati skop luar, membenarkan untuk mengakses pembolehubah dan fungsinya". Takrifan ini menyerlahkan pelbagai aspek penutupan JavaScript.

Untuk menyokong takrifan atau untuk pemahaman yang lebih baik tentang perkara itu, fikirkan penutupan seperti ini. Bayangkan anda mempunyai bekas kotak mainan di mana anda menyimpan semua mainan kegemaran anda (bekas kotak mainan adalah fungsi luar kami). Sekarang bayangkan bahawa di dalam bekas mainan (fungsi luar) anda mempunyai mainan yang berbeza seperti kereta, anak patung dan robot, antara lain. (ini adalah pembolehubah atau fungsi lain) daripada mainan ini, anda mempunyai mainan khas (fungsi dalaman) iaitu robot. Bayangkan robot mempunyai kuasa istimewa melalui saluran; ia boleh memainkan atau menyambung semua mainan lain di dalam kotak mainan walaupun kotak mainan ditutup. Bayangkan saluran atau kuasa khas itu menjadi penutup. Saya harap awak faham. Mari lihat contoh kod untuk menggambarkan penutupan.

<script>
        function details() {
            let surName = 'john';
            let lastName = 'mercy';
            function displayDetails() {
                return `hey ${surName} ${lastName} you have been registered`;
            }
            return displayDetails();
        }
        console.log(details());
    </script>

Dalam kod di atas, displayDetails ialah fungsi atau penutupan, atau lebih baik lagi, merujuk kepada ilustrasi sebelum kod. funtion displayDetails menggunakan kuasa penutupan untuk mengakses pembolehubah di luar skopnya. Inilah perkaranya. displayDetails ditakrifkan dalam butiran, ia mengakses surName dan lastName dari skop luar, dan ia mengekalkan akses ini walaupun di luar skopnya. Atau, dengan cara lain, butiran mencipta skop dengan surName dan lastName, displayDetails mengakses skop ini, displayDetail mengembalikan rentetan menggunakan surName dan lastName, dan butiran mengembalikan hasil displayDetails. console.log(details()); panggilan displayDetails, mengakses pembolehubah skop luar.
Output kod ini ialah hey john mercy, anda telah didaftarkan
Hasilnya ditunjukkan di bawah

Sekarang anda memahami penutupan, mari lihat faedah penutupan dalam penulisan kod Javascript.

Pembolehubah dalam penutupan

• Pembolehubah setempat: Pembolehubah yang diisytiharkan dalam fungsi, boleh diakses hanya dalam skop fungsi dan tidak boleh diakses di luar skop.
• Pembolehubah luar: Pembolehubah yang diisytiharkan dalam fungsi luar boleh diakses oleh fungsi dalam
• Pembolehubah Global: Pembolehubah diisytiharkan di luar semua fungsi, boleh diakses dari mana-mana sahaja

Fungsi dalam penutupan

• Fungsi dalaman: ini adalah fungsi yang ditakrifkan dalam fungsi lain yang mempunyai akses kepada skop luar
• Fungsi luar: fungsi ini mentakrifkan skop untuk fungsi dalaman
• Ungkapan fungsi: fungsi yang ditakrifkan sebagai ungkapan boleh digunakan sebagai penutup

Skop dalam penutupan

• Skop leksikal: fungsi dalaman mempunyai akses kepada skop luar.
• Skop dinamik: skop ditentukan pada masa jalan (tidak digunakan dalam javascript).

Apakah faedah penutupan?

• Menyembunyikan data: melindungi data daripada akses luaran Mari lihat dalam kod di bawah contoh kod yang mempamerkan data ini bersembunyi

<script>
        function details() {
            let surName = 'john';
            let lastName = 'mercy';
            function displayDetails() {
                return `hey ${surName} ${lastName} you have been registered`;
            }
            return displayDetails();
        }
        console.log(details());
    </script>

Dalam kod di atas, fungsi Orang mengambil dua hujah: nama dan umur, Fungsi ini mencipta objek orang baharu. Di dalam fungsi, dua pembolehubah peribadi diisytiharkan: privateName dan privateAge. Pembolehubah ini diberikan nilai yang dihantar kepada fungsi orang ( nama dan Umur). Pembolehubah ini adalah peribadi kerana ia diisytiharkan dengan let dan tidak boleh diakses secara langsung di luar fungsi Person. Objek pulangan juga dibuat dengan tiga kaedah. Ketiga-tiga kaedah ini menyediakan akses terkawal kepada pembolehubah persendirian. Jadi fungsi Orang mencipta penutupan, membenarkan objek yang dikembalikan untuk mengakses pembolehubah peribadi. Juga pembolehubah peribadi disembunyikan daripada akses luaran, memberikan perlindungan data.

• Encapsulation: menggabungkan data dan kaedah
• Pemeliharaan konteks: mengekalkan konteks dalam panggilan tak segerak.

Kes penggunaan biasa penutupan

• Pendengar acara atau pengendalian acara: memelihara konteks acara. Berikut ialah kod pengendalian acara yang mudah

<script>
        function details() {
            let surName = 'john';
            let lastName = 'mercy';
            function displayDetails() {
                return `hey ${surName} ${lastName} you have been registered`;
            }
            return displayDetails();
        }
        console.log(details());
    </script>

Berikut ialah apa yang berlaku dalam kod. Kami mentakrifkan fungsi createClickCounter yang mengembalikan fungsi lain. Di dalam createClickCounter, kami mengisytiharkan pembolehubah ClickCounter yang dimulakan kepada 0.
Fungsi yang dikembalikan menambah clickCounter dan mengemas kini kandungan teks clickCounterElement. Kami memanggil createClickCounter() untuk membuat penutupan dan menetapkannya kepada pemboleh ubah kaunter. Kami melampirkan fungsi kaunter pada acara klik butang menggunakan addEventListener.

Fungsi kaunter ialah penutupan kerana ia mempunyai akses kepada skopnya sendiri, mempunyai akses kepada skop fungsi luar (createClickCounter()), mengekalkan keadaan ClickCounter antara panggilan fungsi.

• Fungsi panggil balik: mengekalkan konteks dalam panggilan tak segerak.
• Modul peribadi: mencipta pembolehubah dan fungsi peribadi

Kesimpulan

Penutupan JavaScript memperkasakan pembangun untuk menulis kod yang cekap, modular dan selamat. Dengan menguasai pembolehubah, fungsi dan skop, pembangun boleh memanfaatkan penutupan potensi sepenuhnya. Penutupan membolehkan enkapsulasi data, pemeliharaan keadaan dan pembolehubah peribadi, meningkatkan kualiti dan kebolehselenggaraan kod. Dengan pemahaman asas ini, pembangun boleh menangani cabaran Javascript yang kompleks dengan yakin. Penggunaan penutupan yang berkesan adalah penting untuk aplikasi JavaScript yang boleh skala, teguh dan cekap.

Atas ialah kandungan terperinci Memahami penutupan JavaScript: pembolehubah, fungsi dan skop.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!