Penutupan adalah kesulitan dalam bahasa JavaScript dan fiturnya. Banyak aplikasi canggih bergantung pada penutupan untuk diterapkan.
Penutupan memiliki tiga karakteristik:
1. Fungsi fungsi bersarang
2. Fungsi dapat merujuk ke parameter dan variabel eksternal di dalamnya
3. Parameter dan variabel tidak akan dikumpulkan oleh mekanisme pengumpulan sampah
Penutupan merujuk pada fungsi yang memiliki akses ke variabel dalam ruang lingkup fungsi lain. Cara paling umum untuk membuat penutupan adalah dengan membuat fungsi lain dalam satu fungsi dan mengakses variabel lokal fungsi ini melalui fungsi lain.
Ada keuntungan menggunakan penutupan, dan juga merupakan kerugiannya, yaitu ia dapat tinggal variabel lokal dalam memori dan menghindari penggunaan variabel global. Variabel global dapat dipanggil di setiap modul, yang pasti akan menjadi bencana besar.
Oleh karena itu, disarankan untuk menggunakan variabel lokal pribadi yang dienkapsulasi.
Setelah fungsi umum dijalankan, objek aktif lokal dihancurkan, dan hanya ruang lingkup global yang disimpan dalam memori. Tapi situasi penutupan berbeda!
Penutupan untuk fungsi bersarang:
fungsi aaa () {var a = 1; return function () {alert (a ++)}; } var fun = aaa (); fun (); // 1 Setelah eksekusi a ++, maka A masih dalam ~ fun (); // 2 fun = null; // a didaur ulang! LaiHasil output di atas adalah 5;
Penutupan akan menjaga variabel dalam memori sepanjang waktu, dan jika digunakan secara tidak benar, meningkatkan konsumsi memori.
Prinsip Pengumpulan Sampah di JavaScript
(1) Dalam JavaScript, jika suatu objek tidak lagi dirujuk, maka objek akan didaur ulang oleh GC;
(2) Jika dua objek saling merujuk dan tidak lagi dirujuk oleh orang ketiga, maka kedua objek ini merujuk satu sama lain juga akan didaur ulang.
Jadi apa manfaat menggunakan penutupan? Manfaat menggunakan penutupan adalah:
1. Saya berharap variabel ditempatkan dalam memori untuk waktu yang lama
2. Hindari kontaminasi variabel global
3. keberadaan anggota pribadi
1. Akumulasi variabel global
<script> var a = 1; function abc () {a ++; peringatan (a);} abc (); // 2abc (); // 3 </script>2. Variabel lokal
<script> function abc () {var a = 1; a ++; peringatan (a);} abc (); // 2abc (); // 2 </script>Jadi bagaimana variabel dapat dicapai sehingga variabel lokal dan dapat diakumulasikan?
3. Akumulasi variabel lokal (penutupan yang dapat dilakukan)
<script> fungsi luar () {var x = 10; return function () {// fungsi fungsi bersarang x ++; peringatan (x); }} var y = luar (); // Fungsi eksternal ditetapkan ke variabel y; y (); // Fungsi Y disebut sekali, hasilnya adalah 11y (); // Fungsi Y disebut kedua kalinya, hasilnya adalah 12, mewujudkan akumulasi </script>Deklarasi Fungsi dan Ekspresi Fungsi di JS:
Di JS kita dapat mendeklarasikan fungsi melalui fungsi kata kunci:
<script> function abc () {alert (123);} abc (); </script>Kami juga dapat menggunakan "()" untuk mengubah deklarasi ini menjadi ekspresi:
<script> (function () {alert (123);}) (); // Kemudian langsung panggil ekspresi sebelumnya melalui (), sehingga fungsi tidak harus menulis nama; </script>4. Kode modular untuk mengurangi polusi variabel global
<script> var abc = (function () {// ABC adalah nilai pengembalian fungsi anonim eksternal var a = 1; return function () {a ++; alert (a);}}) (); abc (); // 2; Memanggil fungsi ABC sekali sebenarnya menyebut nilai pengembalian fungsi internal ABC (); // 3 </script>5. keberadaan anggota pribadi
<script> var aaa = (function () {var a = 1; function bbb () {a ++; alert (a);} function ccc () {a ++; alert (a);} return {b: bbb, // json struktur c: ccc}}) (); aaa.b (); //2aaa.c () // 3 </script>6. Langsung temukan indeks elemen yang sesuai di loop
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "en"> <head> <meta http-equiv = "content-type" content = "text/html; charset = UTF-8"/<title> </title> </title "function. document.getElementsbyTagname ('li'); untuk (var i = 0; i <ali.length; i ++) {ali [i] .Onclick = function () {// Ketika diklik, loop untuk berakhir peringatan (i); }; }} </script> </head> <body> <ul> <li> <li> 123 </li> <li> 456 </li> <li> 789 </li> <li> 010 </li> </ul> </body> </html>7. Gunakan penutupan untuk menulis ulang kode di atas:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "en"> <head> <meta http-equiv = "content-type" content = "text/html; charset = UTF-8"/<title> </title> </title "function. document.getElementsbyTagname ('li'); untuk (var i = 0; i <ali.length; i ++) {(function (i) {ali [i] .OnClick = function () {waspada (i);};}) (i); }}; </script> </head> <body> <ul> <li> 123 </li> <li> 456 </li> <li> 789 </li> </ul> </body> </html>