Menguasai Penutupan dalam JavaScript: Panduan Lengkap dengan Contoh

pengenalan

Bayangkan anda sedang membina apl, larut malam, kopi di tangan, sambil menyahpepijat sekeping kod JavaScript yang berkelakuan...secara misteri. Ia memanggil fungsi dalam fungsi lain, memegang nilai dengan cara yang anda tidak jangkakan dan pernyataan console.log anda tidak menjadikan perkara lebih jelas. Tiba-tiba, anda menyedari bahawa isu itu adalah sesuatu yang hanya anda dengar: penutupan.

Penutupan dalam JavaScript sering dipersembahkan sebagai konsep yang agak ajaib atau abstrak. Tetapi ia sebenarnya merupakan bahagian asas bagaimana JavaScript mengendalikan fungsi dan skop, dan memahaminya boleh menjadikan sesi pengekodan tengah malam itu menjadi "aha!" momen dan bukannya pengalaman yang mengecewakan. Panduan ini akan memecahkan penutupan dengan cara yang menjadikannya mudah didekati, berguna dan juga menyeronokkan, dengan cerapan dan contoh yang melangkaui perkara asas.

Apakah Penutupan?

Penutupan ialah ciri JavaScript di mana fungsi dalam mempunyai akses kepada pembolehubah fungsi luar (menyertakan), walaupun selepas fungsi luar selesai dilaksanakan. Ini berlaku kerana JavaScript "menutup" persekitaran (skop leksikal) di mana fungsi itu dicipta, mengekalkan konteks dalam ingatan. Hasilnya? Fungsi yang boleh "mengingat" persekitaran di mana ia dicipta, membenarkan kefungsian berkuasa seperti privasi data, penghafalan dan banyak lagi.

Definisi Penutupan Dunia Sebenar

Bayangkan anda tinggal di rumah dengan berbilang bilik, dan anda mempunyai kunci yang membuka kunci satu bilik tertentu — mari kita panggilnya "Bilik Data." Kunci melambangkan penutupan. Walaupun pintu utama (fungsi yang mencipta kunci) dikunci, anda masih mempunyai akses ke Bilik Data kerana anda telah mengekalkan kunci tersebut. Begitu juga, penutupan mengekalkan akses kepada pembolehubah dalam fungsi asalnya, walaupun apabila fungsi itu telah selesai.

Mengapa Penutupan Penting untuk Pembangun

Penutupan adalah asas untuk mencipta pembolehubah peribadi dan corak berfungsi seperti kari dan hafalan. Menurut Tinjauan Pembangun Stack Overflow, JavaScript ialah bahasa pengaturcaraan yang paling popular, digunakan oleh hampir 65% pembangun profesional, jadi pemahaman yang kukuh tentang penutupan adalah penting untuk menggunakan JavaScript dengan berkesan.

---

Cara Penutupan Berfungsi dalam JavaScript: Contoh dan Corak

Contoh Penutupan Asas

Mari kita mulakan dengan contoh mudah yang menunjukkan cara penutupan berfungsi dalam tindakan.

function createCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // Output: 1
console.log(counter()); // Output: 2

Berikut ialah perkara yang berlaku dalam kod ini:

1. Fungsi createCounter mentakrifkan kiraan pembolehubah setempat.
2. Fungsi dalaman (penutupan) menambah pembolehubah kiraan dan mengembalikannya.
3. Walaupun createCounter telah selesai melaksanakan, fungsi dalaman masih mempunyai akses untuk mengira — itu adalah penutupan dalam tindakan.

Contoh ini mungkin kelihatan mudah, tetapi ia mempamerkan ciri penting penutupan: memelihara keadaan.

---

Melangkah Lebih Dalam: Kes Penggunaan Lanjutan Penutupan

1. Privasi Data dengan Penutupan

Salah satu kes penggunaan yang paling berkuasa untuk penutupan ialah mewujudkan privasi data, teknik yang membolehkan kami menyekat akses terus kepada pembolehubah atau fungsi tertentu.

function createCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // Output: 1
console.log(counter()); // Output: 2

Di sini, baki adalah peribadi dan hanya boleh diakses atau diubah suai melalui deposit dan getBalance. Ini serupa dengan cara medan persendirian berfungsi dalam OOP, tetapi dalam JavaScript, kami menggunakan penutupan untuk mencapainya.

2. Fungsi Karipap dengan Penutupan

Kari ialah corak pengaturcaraan berfungsi yang memanfaatkan penutupan untuk membolehkan fungsi digunakan sebahagiannya.

function bankAccount(initialBalance) {
  let balance = initialBalance;

  return {
    deposit(amount) {
      balance += amount;
    },
    getBalance() {
      return balance;
    }
  };
}

const myAccount = bankAccount(1000);
myAccount.deposit(500);
console.log(myAccount.getBalance()); // Output: 1500
console.log(myAccount.balance); // Output: undefined

Dalam contoh ini, pengganda mencipta penutupan yang mengekalkan akses kepada faktor, membolehkan kami mencipta fungsi khusus seperti dua kali ganda atau tiga kali ganda dengan hanya melepasi faktor berbeza.

---

Perangkap Biasa dan Cara Mengelakkannya

Penutupan dalam Gelung

Penutupan boleh menghalang pembangun apabila digunakan dalam gelung. Masalah biasa melibatkan penutupan menangkap pembolehubah gelung dan bukannya nilai semasanya.

Pertimbangkan contoh ini:

function multiplier(factor) {
  return function(number) {
    return number * factor;
  };
}

const double = multiplier(2);
console.log(double(5)); // Output: 10

Output:

for (var i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i);
  }, 1000);
}

Oleh kerana i dikongsi merentas semua lelaran gelung, nilai akhir i (3) dicetak tiga kali. Untuk menyelesaikannya, gunakan let untuk mencipta pembolehubah berskop blok, atau buat penutupan dalam gelung:

3
3
3

Kini, output akan menjadi 0, 1, 2 seperti yang dijangkakan, kerana setiap fungsi mempunyai salinan i sendiri (di sini j).

---

Pertimbangan Prestasi

Penutupan boleh menggunakan memori kerana ia memegang pembolehubah dari skop luar. Dalam aplikasi berprestasi tinggi, berhati-hati terhadap kebocoran memori dengan membersihkan penutupan apabila ia tidak diperlukan lagi, terutamanya dalam aplikasi yang berjalan lama. Alat seperti Chrome DevTools menyediakan alat pemprofilan memori yang boleh membantu mengenal pasti dan mengoptimumkan penggunaan memori.

---

Aplikasi Praktikal dalam Rangka Kerja JavaScript

Penutupan adalah asas dalam rangka kerja popular seperti React, di mana cangkuk seperti useState dan useEffect menggunakan penutupan untuk "mengingat" nilai dan menyatakan antara pemaparan. Memahami penutupan boleh menjelaskan cara cangkuk ini berfungsi di bawah hud, menjadikannya lebih mudah untuk menulis kod bebas pepijat yang dioptimumkan.

---

Fikiran Akhir: Memanfaatkan Penutupan

Menguasai penutupan boleh membuka pintu kepada banyak teknik pengaturcaraan lanjutan. Mereka penting untuk menulis kod JavaScript yang bersih, modular dan cekap. Daripada menghindar daripada penutupan, terimalah ia sebagai alat yang berkuasa dalam kit alat JavaScript anda.

---

Sumber

1. Rangkaian Pembangun Mozilla (MDN): Penutupan
2. JavaScript: Panduan Definitif oleh David Flanagan

Memahami penutupan bukan sahaja membantu anda nyahpepijat kod dengan lebih pantas tetapi juga membina asas yang kukuh untuk menguasai struktur berasaskan fungsi JavaScript, membantu anda beralih dengan lancar ke dalam rangka kerja, pengaturcaraan bahagian belakang dengan Node.js dan banyak lagi. Sama ada anda sedang membina apl berskala atau mencipta bahagian hadapan yang sangat interaktif, penutupan ialah kemahiran yang patut dikuasai.

Atas ialah kandungan terperinci Menguasai Penutupan dalam JavaScript: Panduan Lengkap dengan Contoh. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!