Menguasai Penutupan dalam JavaScript: Memahami Skop, Enkapsulasi dan Prestasi

Penutupan

Definisi

Penutupan ialah ciri yang membolehkan fungsi mengakses semua pembolehubah dan fungsi lain yang diisytiharkan dalam tahap skop yang sama (skop leksikal).

• Penutupan ialah ciri yang membolehkan fungsi mengakses semua pembolehubah dan fungsi lain yang diisytiharkan dalam tahap skop yang sama (skop leksikal).
• Penutupan akan dibuat apabila fungsi ditakrifkan dalam fungsi lain (fungsi luar dan fungsi dalam). Fungsi dalam akan membuat penutupan yang menyediakan akses kepada fungsi dalam kepada semua pembolehubah dan fungsi yang dicipta dalam fungsi luar itu.
• Penutupan membenarkan fungsi dalam mengakses pembolehubah yang diisytiharkan dalam fungsi luar, walaupun selepas fungsi luar telah kembali.
• Kita perlu mengendalikan memori dengan betul, penutupan boleh menyebabkan kebocoran memori dan pengurusan memori yang lebih baik.

• Penutupan dalam JavaScript mempunyai tujuan yang serupa dengan kaedah persendirian di Java dengan membenarkan anda mencipta pembolehubah peribadi dan merangkum fungsi.

  Contoh

  function outerFunction() {
      let outerVariable = 'I am from outer scope';
  
      function innerFunction() {
          console.log(outerVariable); // Accessing outerVariable from the outer scope
      }
  
      return innerFunction; // Return the inner function
  }
  
  const closureFunction = outerFunction(); // Call outerFunction, which returns innerFunction
  closureFunction(); // Outputs: I am from outer scope
  

  • Lihat dalam contoh di atas kita memanggil fungsi dalaman sahaja kerana ia hanya dikembalikan. Walaupun kita mempunyai akses kepada outerVariable.
  • Mari kita lihat satu lagi contoh terbaik

      function handleCount() {
      let count = 0;
  
      return {
          increment: () => {
                  count++;
                  return count;
          },
          decrement: () => {
                  count--;
                  return count;
          },
          getCount: () => {
                  return count;
          },
      };
  }
  
  const counter = handleCount();
  console.log(counter.increment()); // Outputs: 1
  console.log(counter.increment()); // Outputs: 2
  console.log(counter.getCount());  // Outputs: 2
  console.log(counter.decrement()); // Outputs: 1
  console.log(counter.getCount());  // Outputs: 1
  

  • Sekarang untuk setiap kali kami memanggil kenaikan, penurunan, getCount not handleCount akan dimulakan hanya fungsi yang dipanggil akan dilaksanakan tetapi kami juga mempunyai akses kepada pembolehubah di luar skopnya. Ini dipanggil sebagai penutupan.

Perkara utama yang perlu diingat

• Definisi: Penutupan ialah fungsi yang mengekalkan akses kepada skop leksikalnya, walaupun apabila fungsi tersebut dilaksanakan di luar skop tersebut.
• Rantai Skop: Penutupan dibuat apabila fungsi ditakrifkan dalam fungsi lain. Fungsi dalam membentuk penutupan yang merangkumi skop fungsi luar.
• Akses kepada Pembolehubah: Penutupan membenarkan fungsi dalam mengakses pembolehubah yang diisytiharkan dalam fungsi luar, walaupun selepas fungsi luar telah kembali.
• Pembolehubah Peribadi: Penutupan selalunya digunakan untuk mencipta pembolehubah peribadi. Ini bermakna pembolehubah boleh disembunyikan daripada skop global dan hanya diakses melalui penutupan.
• Pengurusan Memori: Penutupan boleh membawa kepada kecekapan ingatan yang lebih baik, kerana ia hanya mengekalkan pembolehubah yang diperlukan untuk pelaksanaan.
• Pertimbangan Prestasi: Walaupun penutupan adalah hebat, ia juga boleh menyebabkan kebocoran memori jika tidak diurus dengan betul, terutamanya dalam objek atau pendengar acara yang berumur panjang.

Kes guna

• Encapsulation: Untuk mencipta data atau kaedah peribadi.
• Fungsi Kilang: Untuk mencipta fungsi dengan parameter pratetap.
• Panggil balik: Untuk pengaturcaraan tak segerak (seperti dalam pengendali acara atau setTimeout).
• CSS: rem dan em. rem berasal daripada unsur akar (html / badan) tetapi em berasal daripada induk terdekatnya.

Soalan temuduga biasa

• Apakah penutupan, dan bagaimana ia berfungsi?
• Bolehkah anda terangkan perbezaan antara penutupan dan fungsi biasa?
• Sediakan contoh penutupan dalam JavaScript.
• Apakah kes penggunaan penutupan dalam JavaScript?
• Bagaimanakah penutupan boleh membawa kepada kebocoran ingatan, dan bagaimana anda boleh menghalangnya?

Atas ialah kandungan terperinci Menguasai Penutupan dalam JavaScript: Memahami Skop, Enkapsulasi dan Prestasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!