Apakah penutupan JavaScript dengan contoh?

JavaScript adalah bahasa pengaturcaraan serba boleh yang menyokong pelbagai paradigma pengaturcaraan. Salah satu ciri paling kuat dari JavaScript adalah penutupan, yang membolehkan pemaju membuat kod yang kuat dan fleksibel. Dalam artikel ini, kita akan meneroka apa penutupan dan bagaimana mereka bekerja, bersama dengan beberapa contoh.

Apakah penutupan JavaScript?

Penutupan adalah fungsi dalaman yang mempunyai akses kepada pembolehubah, parameter, dan argumen fungsi luar. Fungsi dalaman dapat mengakses pembolehubah ini walaupun selepas fungsi luar telah kembali. Penutupan membolehkan anda merangkum dan melindungi data dalam fungsi, menghalangnya daripada diakses oleh fungsi lain.

Penutupan dibuat apabila fungsi ditakrifkan di dalam fungsi lain dan dikembalikan sebagai nilai. Fungsi yang dikembalikan mengekalkan rujukan kepada pembolehubah dalam fungsi luar, walaupun selepas fungsi luar telah dikembalikan. Ini bermakna fungsi dalaman dapat mengakses dan memanipulasi pembolehubah tersebut.

Penutupan boleh digunakan dalam pelbagai situasi, seperti mewujudkan pembolehubah dan kaedah peribadi, melaksanakan panggilan balik dan pengendali acara, dan menguruskan negeri.

Contoh 1: Pembolehubah dan kaedah peribadi

Salah satu penggunaan penutupan yang paling biasa adalah untuk membuat pembolehubah dan kaedah peribadi. Pembolehubah dan kaedah peribadi tidak dapat diakses dari luar fungsi, menjadikannya lebih selamat dan kurang terdedah kepada kesilapan.

fungsi kaunter () let count = 0; peningkatan fungsi () count ++; konsol.log (kiraan); kenaikan pulangan; const incrementCount = counter (); InvementCount (); // 1 incrementCount (); // 2 incrementCount (); // 3

12345678910111213141516

fungsi kaunter () let count = 0; peningkatan fungsi () count ++; konsol.log (kiraan); pulangan kenaikan; const incrementCount = counter (); InvementCount (); // 1IncrementCount (); // 2IncrementCount (); // 3

Dalam contoh di atas, kami telah mencipta a kaunter fungsi yang mengembalikan fungsi kenaikan. The hitung Pemboleh ubah ditakrifkan dalam kaunter fungsi tetapi hanya boleh diakses dari kenaikan fungsi. Setiap kali kenaikan fungsi dipanggil, ia meningkatkan pemboleh ubah kiraan dan log nilai baru ke konsol.

Contoh 2: Panggil balik dan pengendali acara

Penutup juga boleh digunakan untuk melaksanakan panggilan balik dan pengendali acara. Panggilan balik adalah fungsi yang diluluskan sebagai hujah kepada fungsi lain dan dipanggil apabila fungsi lain selesai. Pengendali acara adalah fungsi yang dipanggil sebagai tindak balas kepada peristiwa tertentu, seperti butang klik atau borang penyerahan.

fungsi fetchData (url, callback) fetch (url) .Kemudian (respons => respons.json ()) .Kemudian (data => panggilan balik (data)) .menangkap (ralat => konsol.ralat (ralat)); FetchData ('https: // api.Contoh.com/data ', fungsi (data) konsol.log (data); );

12345678910

fungsi fetchData (url, callback) fetch (url) .Kemudian (respons => respons.json ()) .Kemudian (data => panggilan balik (data)) .menangkap (ralat => konsol.ralat (ralat)); fetchData ('https: // api.Contoh.com/data ', fungsi (data) konsol.log (data););

Dalam contoh di atas, kami telah mencipta a fetchdata fungsi yang mengambil URL dan fungsi panggil balik sebagai hujah. The fetchdata fungsi menggunakan ambil API untuk mendapatkan data dari URL yang ditentukan dan kemudian lulus data tersebut ke fungsi panggil balik. Fungsi panggil balik ditakrifkan sebagai fungsi tanpa nama yang log data ke konsol.

Contoh 3: Menguruskan Negeri

Penutup juga boleh digunakan untuk menguruskan negeri dalam program. Negeri merujuk kepada data yang menerangkan keadaan semasa program, seperti input pengguna atau tetapan aplikasi.

fungsi createCounter (initialValue = 0) let count = initialValue; kembali kenaikan () count ++; konsol.log (kiraan); , decrement () count--; konsol.log (kiraan); , reset () count = initialValue; konsol.log (kiraan); ; const counter = createCounter (5); kaunter.kenaikan (); // 6 kaunter.pengurangan (); // 5 kaunter.menetapkan semula (); // 5

123456789101112131415161718192021222324

fungsi createCounter (initialValue = 0) let count = initialValue; kembali kenaikan () count ++; konsol.log (kiraan); , decrement () count--; konsol.log (kiraan); , reset () count = initialValue; konsol.log (kiraan); ; const counter = createCounter (5); kaunter.kenaikan (); // 6counter.pengurangan (); // 5Counter.menetapkan semula (); // 5

Dalam contoh di atas, kami telah mencipta a CreateCounter Fungsi yang mengembalikan objek dengan tiga kaedah: kenaikan, pengurangan, dan Tetapkan semula. Kaedah mengakses dan memanipulasi pemboleh ubah kiraan yang ditakrifkan dalam CreateCounter fungsi. Nilai awal dari hitung ditetapkan ke parameter awal yang diteruskan ke CreateCounter. Setiap kaedah mengembalikan nilai terkini bagi hitung dan masuk ke konsol.

The kaunter objek yang dikembalikan oleh CreateCounter mengekalkan rujukan kepada pemboleh ubah kiraan di CreateCounter berfungsi, membenarkan kenaikan, pengurangan, dan Tetapkan semula kaedah untuk mengakses dan mengubah keadaan program.

Kesimpulan

Kesimpulannya, penutupan adalah ciri kuat JavaScript yang membolehkan anda membuat kod yang fleksibel dan selamat. Penutupan dibuat apabila fungsi ditakrifkan di dalam fungsi lain dan dikembalikan sebagai nilai. Fungsi yang dikembalikan mengekalkan rujukan kepada pembolehubah dalam fungsi luar, walaupun selepas fungsi luar telah dikembalikan. Penutupan boleh digunakan dalam pelbagai situasi, seperti mewujudkan pembolehubah dan kaedah persendirian, melaksanakan panggilan balik dan pengendali acara, dan menguruskan negeri. Dengan menggunakan penutupan dalam kod JavaScript anda, anda boleh menulis lebih banyak aplikasi yang mantap dan boleh dipelihara.