Memahami Penutupan JavaScript: Panduan Komprehensif

Memahami Penutupan JavaScript: Panduan Komprehensif.

Apakah Penutupan?

Penutupan ialah konsep JavaScript asas di mana fungsi dalaman mempunyai akses kepada pembolehubah dan parameter fungsi luarnya (menyertakan), walaupun selepas fungsi luar selesai dilaksanakan. Dalam istilah yang lebih mudah, penutupan membenarkan fungsi untuk "mengingat" dan mengakses pembolehubah dari skop luarnya walaupun apabila fungsi itu dilaksanakan dalam skop yang berbeza.

Tiga Skop Penutupan

Setiap penutupan dalam JavaScript mempunyai akses kepada tiga skop:

• Skopnya sendiri (pembolehubah ditakrifkan di dalam fungsi)
• Pembolehubah fungsi luar (pembolehubah daripada fungsi induknya)
• Pembolehubah global (pembolehubah tersedia sepanjang aplikasi)

Skop Leksikal: Asas

Mari kita fahami skop leksikal dengan contoh asas:

function init() {
  var name = "Mozilla"; // local variable created by init
  function displayName() {
    // inner function
    console.log(name); // uses variable declared in parent function
  }
  displayName();
}
init();

Dalam contoh ini:

• Fungsi init() mencipta nama pembolehubah tempatan dan fungsi dalaman displayName()
• displayName() ialah fungsi dalaman yang hanya wujud dalam init()
• displayName() tidak mempunyai pembolehubah tempatan sendiri
• Oleh kerana skop leksikal, ia mempunyai akses kepada pembolehubah dalam skop induknya, termasuk nama

Memahami Penutupan dalam Tindakan

Mari kita lihat versi diubah suai sedikit yang menunjukkan penutupan:

function makeFunc() {
  const name = "Mozilla";
  function displayName() {
    console.log(name);
  }
  return displayName;
}

const myFunc = makeFunc();
myFunc();

Isi penting untuk difahami:

• Ini kelihatan serupa dengan contoh sebelumnya, tetapi terdapat perbezaan penting
• Daripada melaksanakan fungsi dalaman serta-merta, kami mengembalikannya
• Walaupun makeFunc() telah selesai melaksanakan, myFunc masih mempunyai akses kepada pembolehubah nama
• Ini mungkin kerana fungsi mengekalkan rujukan kepada persekitaran leksikalnya

Contoh Praktikal: Kilang Fungsi

Berikut ialah contoh yang lebih praktikal yang menunjukkan kuasa penutupan:

function makeAdder(x) {
  return function(y) {
    return x + y;
  };
}

const add5 = makeAdder(5);
const add10 = makeAdder(10);

console.log(add5(2));  // outputs 7
console.log(add10(2)); // outputs 12

Mari kita pecahkan apa yang berlaku:

• makeAdder ialah kilang fungsi - ia mencipta fungsi tersuai
• Setiap fungsi yang dicipta mengingati nilai x yang dihantar kepada makeAdder
• add5 dan add10 kedua-duanya adalah penutupan:

Mereka berkongsi definisi fungsi yang sama
Tetapi mereka mempunyai persekitaran leksikal yang berbeza
Dalam persekitaran add5, x ialah 5
Dalam persekitaran add10, x ialah 10

Mengapa Penutupan Penting

Penutupan adalah berkuasa kerana ia membenarkan:

1. Privasi data: Pembolehubah di dalam penutupan kekal peribadi dan tidak boleh diakses dari luar
2. Pemeliharaan keadaan: Mereka boleh mengekalkan keadaan antara panggilan fungsi
3. Fungsi kilang: Anda boleh mencipta fungsi khusus dengan parameter yang telah ditetapkan
4. Corak modul: Ia adalah asas kepada corak modul dalam JavaScript

Kesimpulan

Memahami penutupan adalah penting untuk pembangun JavaScript kerana ia digunakan secara meluas dalam corak, rangka kerja dan perpustakaan JavaScript moden. Ia menyediakan cara untuk mencipta pembolehubah peribadi dan mengekalkan keadaan dalam pengaturcaraan berfungsi sambil memastikan kod anda bersih dan boleh diselenggara.

Ingat: Penutupan bukan sekadar fungsi di dalam fungsi lain - ia adalah fungsi yang mempunyai akses kepada pembolehubah dalam skop luarnya dan mengekalkan akses itu walaupun selepas fungsi luar selesai dilaksanakan.

Atas ialah kandungan terperinci Memahami Penutupan JavaScript: Panduan Komprehensif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!