Rumah hujung hadapan web tutorial js [JavaScript] Fahami penutupan dalam beberapa saat

[JavaScript] Fahami penutupan dalam beberapa saat

Aug 26, 2024 pm 09:31 PM

[JavaScript] Understand closures in  seconds

Walaupun penutupan merupakan idea asas dalam JavaScript, pendatang baharu mungkin mendapati ia kabur dan mencabar untuk difahami. Secara khusus, definisi piawaian ECMA boleh mencabar untuk difahami tanpa sebarang pengalaman dunia sebenar. Akibatnya, kami akan memudahkan anda memahami dengan menggunakan kod sebenar daripada menjelaskan tanggapan penutupan dalam siaran ini.

1. Penutupan

function A(name){
    function B(){
       console.log(name);
    }
    return B;
}
var C = A("Closure");
C();//Closure
Salin selepas log masuk

Ini adalah penutupan yang paling mudah.

Sekarang kita tahu asasnya, mari kita semak secara ringkas bagaimana ini berbeza daripada fungsi biasa. Berikut ialah cara kod yang disebutkan di atas muncul apabila diterjemahkan ke dalam bahasa semula jadi:

  1. Tentukan fungsi biasa A, dengan nama argumen
  2. Tentukan fungsi biasa B dalam A, dan dalam B, rujuk nama pembolehubah luaran
  3. Kembalikan B dalam A
  4. Laksanakan A dan tetapkan hasilnya kepada pembolehubah C
  5. Jalankan C

Satu pernyataan boleh merangkumi lima operasi ini:

Fungsi B dalam fungsi A dan nama pembolehubah dirujuk oleh pembolehubah C di luar fungsi A.

Dengan sedikit pengubahsuaian, pernyataan ini mentakrifkan penutupan seperti berikut:

Apabila fungsi dalam dirujuk oleh pembolehubah di luar fungsi luar, penutupan terbentuk.

Oleh itu, melaksanakan lima operasi di atas mentakrifkan penutupan.

Penggunaan Penutupan

Sebelum kita memahami penggunaan penutupan, mari kita fahami mekanisme GC (Pengumpulan Sampah) JavaScript.

Dalam JavaScript, apabila objek tidak lagi dirujuk, ia akan dituntut semula oleh GC, jika tidak, ia akan terus disimpan dalam ingatan.

Dalam contoh di atas, B bergantung pada A kerana B ditakrifkan dalam A, dan A secara tidak langsung dirujuk oleh C kerana pembolehubah luaran C merujuk B.

Iaitu, A tidak akan dikumpul oleh GC dan akan terus disimpan dalam ingatan. Untuk membuktikan alasan ini, mari kita perbaiki sedikit contoh di atas.

function A(){
    var count = 0;
    function B(){
       count ++;
       console.log(count);
    }
    return B;
}
var C = A();
C();// 1
C();// 2
C();// 3
Salin selepas log masuk
  1. Jika kita memanggil var C = A();, A dilaksanakan, mewujudkan pembolehubah kiraan dan fungsi dalaman B. Oleh kerana A mengembalikan B, pembolehubah C sebenarnya mempunyai rujukan kepada B. Fungsi B kemudiannya boleh mengakses pembolehubah kira dalam A.
  2. Fungsi B boleh mengakses pembolehubah kiraan dalam A kerana B ialah penutupan. Ini kerana B ialah penutupan dan penutupan mengekalkan konteks di mana ia dicipta (cth., pembolehubah setempat).
  3. Apabila C() dipanggil, ia sebenarnya memanggil fungsi B. Setiap kali C() dipanggil, B menambah nilai kiraan dan memaparkan nilai itu pada konsol.
  4. Konteks pelaksanaan A tamat apabila B dicipta, tetapi pembolehubah tempatan A tidak dituntut semula selagi B merujuk pembolehubah setempatnya (seperti kiraan).
  5. Hanya apabila B tidak lagi dirujuk, pembolehubah kiraan dan pembolehubah tempatan lain dalam A akan dipulihkan. Dalam contoh ini, memandangkan C masih merujuk kepada B, nilai kiraan tidak dipulihkan, begitu juga konteks pelaksanaan A.

Mengapa kiraan tidak ditetapkan semula?

Mekanisme penutupan:

  • Penutupan mengekalkan keadaan kiraan dan memastikannya boleh diakses oleh fungsi dalaman B. Walaupun konteks pelaksanaan A ditamatkan, keadaan kiraan kekal dalam ingatan kerana B terus merujuk kepada keadaan ini.
  • Pada setiap panggilan ke B: Setiap panggilan ke C() sebenarnya adalah panggilan ke B(), yang menggunakan kiraan yang disimpan dalam penutupan dan tidak memulakannya semula.

Oleh itu, jika anda mentakrifkan beberapa pembolehubah dalam modul dan ingin menyimpan pembolehubah ini dalam ingatan tetapi tidak "mencemarkan" pembolehubah global, anda boleh mentakrifkan modul ini menggunakan penutupan.

Atas ialah kandungan terperinci [JavaScript] Fahami penutupan dalam beberapa saat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Ganti aksara rentetan dalam javascript Ganti aksara rentetan dalam javascript Mar 11, 2025 am 12:07 AM

Ganti aksara rentetan dalam javascript

periksa jQuery jika tarikh sah periksa jQuery jika tarikh sah Mar 01, 2025 am 08:51 AM

periksa jQuery jika tarikh sah

jQuery mendapatkan padding/margin elemen jQuery mendapatkan padding/margin elemen Mar 01, 2025 am 08:53 AM

jQuery mendapatkan padding/margin elemen

10 Tab Accordion JQuery 10 Tab Accordion JQuery Mar 01, 2025 am 01:34 AM

10 Tab Accordion JQuery

10 patut diperiksa plugin jQuery 10 patut diperiksa plugin jQuery Mar 01, 2025 am 01:29 AM

10 patut diperiksa plugin jQuery

HTTP Debugging dengan Node dan HTTP-Console HTTP Debugging dengan Node dan HTTP-Console Mar 01, 2025 am 01:37 AM

HTTP Debugging dengan Node dan HTTP-Console

Tutorial Persediaan API Carian Google Custom Tutorial Persediaan API Carian Google Custom Mar 04, 2025 am 01:06 AM

Tutorial Persediaan API Carian Google Custom

jQuery tambah bar scroll ke div jQuery tambah bar scroll ke div Mar 01, 2025 am 01:30 AM

jQuery tambah bar scroll ke div

See all articles