Analisis mendalam tentang mekanisme penutupan JavaScript_Pengetahuan asas

Pembolehubah JavaScript boleh menjadi pembolehubah tempatan atau pembolehubah global.
Penutupan boleh digunakan untuk pembolehubah persendirian.
Pembolehubah global
Fungsi boleh mengakses pembolehubah yang ditakrifkan dalam fungsi, seperti:
Contoh

function myFunction() {
  var a = 4;
  return a * a;
}

Fungsi juga boleh mengakses pembolehubah yang ditakrifkan di luar fungsi, seperti:
Contoh

var a = 4;
function myFunction() {
  return a * a;
}

Dalam contoh terakhir, a ialah pembolehubah global.
Pembolehubah global dalam halaman web tergolong dalam objek tetingkap.
Pembolehubah global digunakan pada semua skrip pada halaman.
Dalam contoh pertama, a ialah pembolehubah tempatan.
Pembolehubah tempatan hanya boleh digunakan di dalam fungsi di mana ia ditakrifkan. Tidak tersedia untuk fungsi lain atau kod skrip.
Walaupun pembolehubah global dan tempatan mempunyai nama yang sama, ia adalah dua pembolehubah yang berbeza. Mengubah suai salah satu daripadanya tidak akan menjejaskan nilai yang lain.
Nota
Jika pembolehubah diisytiharkan tanpa kata kunci var, ia adalah pembolehubah global, walaupun ia ditakrifkan dalam fungsi.

Kitaran hayat boleh ubah
Skop pembolehubah global adalah global, iaitu pembolehubah global terdapat di mana-mana dalam keseluruhan program JavaScript.
Pembolehubah yang diisytiharkan di dalam fungsi hanya berfungsi di dalam fungsi. Pembolehubah ini adalah pembolehubah tempatan dan skopnya adalah setempat; parameter fungsi juga adalah setempat dan hanya berfungsi di dalam fungsi.
Dilema Kaunter
Bayangkan anda ingin mengira beberapa nilai, dan kaunter tersedia dalam semua fungsi.
Anda boleh menggunakan pembolehubah global, fungsi untuk menetapkan pembilang kepada kenaikan:
Contoh

var counter = 0;

function add() {
  counter += 1;
}

add();
add();
add();

// 计数器现在为 3

Nilai pembilang berubah apabila fungsi add() dilaksanakan.
Tetapi inilah masalahnya, mana-mana skrip pada halaman boleh menukar kaunter, walaupun fungsi add() tidak dipanggil.
Jika saya mengisytiharkan pembilang di dalam fungsi, nilai pembilang tidak boleh diubah suai tanpa memanggil fungsi:
Contoh

function add() {
  var counter = 0;
  counter += 1;
}

add();
add();
add();

// 本意是想输出 3, 但事与愿违，输出的都是 1 !

Kod di atas tidak akan dikeluarkan dengan betul, setiap kali saya memanggil fungsi add(), pembilang akan ditetapkan kepada 1.
Fungsi sebaris JavaScript boleh menyelesaikan masalah ini.
Fungsi terbina dalam JavaScript
Semua fungsi mempunyai akses kepada pembolehubah global.
Malah, dalam JavaScript, semua fungsi mempunyai akses kepada skop di atasnya.
JavaScript menyokong fungsi bersarang. Fungsi bersarang boleh mengakses pembolehubah fungsi peringkat atas.
Dalam contoh ini, fungsi sebaris plus() boleh mengakses pembolehubah pembilang fungsi induk:
Contoh

function add() {
  var counter = 0;
  function plus() {counter += 1;}
  plus();  
  return counter; 
}

Jika kita boleh mengakses fungsi tambah() secara luaran, ini akan menyelesaikan dilema balas.
Kita juga perlu memastikan bahawa kaunter = 0 hanya dilaksanakan sekali.
Kami memerlukan penutupan.
Penutupan JavaScript
Ingat fungsi memanggil dirinya sendiri? Apakah fungsi ini?
Contoh

var add = (function () {
  var counter = 0;
  return function () {return counter += 1;}
})();

add();
add();
add();

// 计数器为 3

Contoh analisis
Tambah pembolehubah menentukan nilai perkataan pulangan bagi fungsi yang memanggil itu sendiri.
Fungsi panggilan kendiri dilaksanakan sekali sahaja. Tetapkan pembilang kepada 0. dan mengembalikan ungkapan fungsi.
Pembolehubah tambah boleh digunakan sebagai fungsi. Bahagian yang menarik ialah ia memberikan akses kepada pembilang dari skop di atas fungsi.
Ini dipanggil penutupan JavaScript. Ia membolehkan fungsi mempunyai pembolehubah persendirian.
Kaunter dilindungi oleh skop fungsi tanpa nama dan hanya boleh diubah suai melalui kaedah tambah.

Nota
Penutupan ialah fungsi yang boleh mengakses pembolehubah dalam skop fungsi sebelumnya, walaupun fungsi sebelumnya telah ditutup.