Memahami Penutupan dalam JavaScript: Daripada Kekeliruan kepada Kejelasan

Bayangkan Ini...

Anda sedang mengusahakan projek dan anda memerlukan fungsi untuk "mengingat" nilai pembolehubah—walaupun selepas fungsi itu selesai dijalankan. Penutupan adalah seperti beg galas ajaib yang membolehkan anda membawa pengetahuan dari pelajaran sebelumnya ke mana sahaja anda pergi dalam kod anda. Ia merupakan salah satu konsep yang paling berkuasa namun disalahfahamkan dalam JavaScript. Tetapi jangan risau—menjelang penghujung panduan ini, penutupan akan berubah daripada menggaru kepala kepada "aha!"

Apakah Penutupan? Definisi dan Analogi yang Dipermudahkan

Penutupan ialah apabila fungsi "mengingat" keadaan sekelilingnya (pembolehubah dalam skopnya) walaupun selepas fungsi luar selesai dilaksanakan. Mari kita pecahkan ini dengan analogi yang boleh dikaitkan:

Analogi Kehidupan Sebenar: Beg galas Pengetahuan

Bayangkan anda seorang pelajar. Anda mempunyai beg galas dengan nota, pen dan buku anda. Anda meninggalkan bilik darjah (fungsi luar anda), tetapi anda masih mempunyai akses kepada segala-galanya dalam beg galas anda (penutupan anda). Bila-bila masa anda perlu menyelesaikan masalah kemudian, anda boleh mengeluarkan pengetahuan yang anda simpan dalam beg galas anda.

Definisi Ringkas

Dalam JavaScript, penutupan berlaku apabila:

1. Sesuatu fungsi ditakrifkan dalam fungsi lain.
2. Fungsi dalam "mengingat" pembolehubah fungsi luar.

Bagaimana Penutupan Berfungsi? Contoh dalam Tindakan

Mari kita lihat penutupan dalam tindakan dengan contoh kod.

Contoh 1: Penutupan Asas

function outerFunction() {
  const outerVariable = 'Hello, Closure!';

  function innerFunction() {
    console.log(outerVariable);
  }

  return innerFunction;
}

const myClosure = outerFunction();
myClosure(); // Output: "Hello, Closure!"

Apa Yang Berlaku Di Sini?

• innerFunction dikembalikan daripada outerFunction.
• Walaupun outerFunction telah selesai dilaksanakan, innerFunction masih mengingati outerVariable.

Contoh 2: Penutupan untuk Kaunter

function createCounter() {
  let count = 0;

  return function () {
    count++;
    return count;
  };
}

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

Apa Yang Berlaku Di Sini?

• Fungsi yang dikembalikan "mengingat" pembolehubah kiraan, walaupun createCounter telah selesai dijalankan.
• Setiap kali anda menghubungi kaunter, ia mengemas kini dan mengingati nilai kiraan terkini.

Contoh 3: Penutupan dalam Gelung (Perangkap Biasa)

Penutupan sering menyebabkan pembangun tersandung apabila digunakan di dalam gelung.

for (let i = 1; i <= 3; i++) {
  setTimeout(() => console.log(i), i * 1000);
}
// Output: 1, 2, 3 (each after 1 second)

Mengapa Ini Berfungsi?

• Kata kunci let mencipta skop blok, jadi setiap lelaran mempunyai i sendiri.
• Jika anda menggunakan var dan bukannya let, semua output akan menjadi 4 kerana var tidak mencipta skop blok.

? Dokumentasi: Penutupan pada MDN

Kes Penggunaan Biasa untuk Penutupan

Penutupan bukan sekadar konsep teori—ia sangat praktikal! Berikut ialah beberapa senario biasa di mana penutupan bersinar.

1. Caching Data

Penutupan boleh menyimpan nilai yang dikira untuk digunakan semula, menjimatkan masa dan sumber.

function outerFunction() {
  const outerVariable = 'Hello, Closure!';

  function innerFunction() {
    console.log(outerVariable);
  }

  return innerFunction;
}

const myClosure = outerFunction();
myClosure(); // Output: "Hello, Closure!"

2. Pengendali Acara

Penutupan sering digunakan dalam pendengar acara untuk mengekalkan keadaan.

function createCounter() {
  let count = 0;

  return function () {
    count++;
    return count;
  };
}

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

3. Pembolehubah Peribadi

Anda boleh menggunakan penutupan untuk mencipta pembolehubah peribadi, merangkum fungsi.

for (let i = 1; i <= 3; i++) {
  setTimeout(() => console.log(i), i * 1000);
}
// Output: 1, 2, 3 (each after 1 second)

Mengapa Penutupan Berkuasa

Penutupan membolehkan anda:

• Kekalkan keadaan: Ingat pembolehubah walaupun selepas fungsi selesai dilaksanakan.
• Kefungsian merangkum: Pastikan pembolehubah peribadi dan selamat.
• Ringkaskan kod: Elakkan pembolehubah global dengan menggunakan penutupan untuk pengurusan negeri.

Kesimpulan: Cabar Diri Anda untuk Menggunakan Penutupan

Penutupan adalah seperti pisau Swiss Army dalam JavaScript. Sama ada anda menyimpan data dalam cache, mengendalikan acara atau membuat pembolehubah peribadi, penutupan memberi anda cara yang berkesan untuk mengurus keadaan dalam apl anda.

Cabaran Anda: Cuba gunakan penutupan dalam projek kecil, seperti membina kaunter ringkas atau mencipta mekanisme caching. Anda akan kagum melihat sejauh mana penutupan kawalan memberi anda!

Jika anda menyukai artikel ini, pertimbangkan untuk menyokong kerja saya:

• Beli saya kopi
• Tempah panggilan untuk bimbingan atau nasihat kerjaya
• Ikuti saya di Twitter
• Sambung di LinkedIn

Atas ialah kandungan terperinci Memahami Penutupan dalam JavaScript: Daripada Kekeliruan kepada Kejelasan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!