Menyahmistikan Penutupan di JS

WBOY
Lepaskan: 2024-09-01 21:13:32
asal
1106 orang telah melayarinya

Demystifying Closures in JS

  • Perlu dikuasai untuk memahami perincian bahasa yang rumit.
  • Tidak dibuat seperti kami mencipta tatasusunan atau fungsi.
  • Fn mengembalikan fn lain yang disimpan di dalam pembolehubah LHS.
const secureBooking = function(){
  let passengerCount = 0;
  return function(){
    passengerCount++;
    console.log(`${passengerCount} passengers`);
  }
}

const booker = secureBooking();

booker();
booker();
booker();
Salin selepas log masuk
  • secureBooking fn dilaksanakan dalam skop global.
  • Konteks pelaksanaan baharu akan dibuat pada konteks pelaksanaan global.
  • Setiap konteks pelaksanaan(EC) mempunyai persekitaran pembolehubahnya sendiri dengan semua pembolehubahnya. 'let passengerCount = 0' ditakrifkan di dalam EC ini. Ia boleh mengakses semua pembolehubah skop induknya.
  • Fn baharu dikembalikan, dan akan disimpan dalam penempah.
  • SPR Global juga akan mengandungi pembolehubah penempah.
  • Kini secureBooking() akan dialih keluar daripada EC dan hilang. Persekitaran secureBooking EC tidak lagi aktif. Tetapi tetap pembolehubah Bilangan penumpang sedang diakses yang ditakrifkan pada masa penciptaan fn.
  • Namun, fn dalam akan dapat mengakses pembolehubah Bilangan penumpang yang ditakrifkan di dalam fn luar. Ini berlaku kerana penutupan.
  • Penutupan membuat fn mengingati pembolehubah yang ditakrifkan mengelilingi tempat kelahiran fn atau ECnya.
  • booker bukan fn, terletak dalam skop global.
  • Sekarang melaksanakan booker(); buat pertama kalinya akan mencipta EC pada timbunan panggilan, dengan pembolehubahnya sendiri.
  • Fn mempunyai akses kepada persekitaran berubah bagi konteks pelaksanaan di mana fn dicipta i. secureBooking. Oleh itu, penempah akan mempunyai akses kepada pembolehubah yang ditakrifkan dalam persekitaran berubah-ubah secureBooking fn. Sambungan tempat kelahiran fn iaitu definisi kepada persekitaran pembolehubah sekelilingnya dipanggil Penutupan walaupun selepas EC secureBooking fn yang mengandungi fn telah muncul daripada Tindanan Panggilan.
  • Penutupan: Persekitaran Berubah yang dilekatkan pada fn, sama seperti pada masa dan tempat fn dicipta.
  • Rantai skop dikekalkan melalui penutupan, walaupun EC hilang, persekitaran berubah-ubah tetap hidup dalam Enjin. Oleh itu, kami katakan booker fn ditutup berbanding induk fn termasuk hujah induk fn yang kami tiada di sini.
  • Dengan menggunakan penutupan, fn tidak kehilangan sambungan kepada pembolehubah yang ditakrifkan di sekeliling tempat kelahirannya.
  • Jika pembolehubah tidak berada dalam skop semasa, JS melihat ke dalam penutupan walaupun sebelum melihat rantai skop. Katakan jika terdapat pembolehubah global, walaupun pembolehubah yang ditakrifkan dalam penutupannya dicari dahulu.
  • Penutupan mempunyai keutamaan berbanding rantai skop.
  • Selepas menjalankan booker() buat kali pertama, nilai passengerCount dinaikkan, log masuk konsol dan kemudian booker dikeluarkan dari timbunan panggilan.
  • Pelaksanaan beralih ke baris seterusnya, EC baharu dicipta tetapi pembolehubah penutupan masih ada. Nilai sedia ada dinaikkan dan SPR muncul.
  • Sekali lagi proses ini berulang kali ketiga.

RINGKASAN

  • Defn: Penutupan ialah persekitaran berubah-ubah tertutup SPR di mana fn dicipta, walaupun selepas SPR itu hilang.

  • Selain itu, penutupan memberikan akses fn kepada semua pembolehubah fn induknya, walaupun selepas induk fn itu kembali. Fn menyimpan rujukan kepada skop luarnya, yang mengekalkan rantai skop sepanjang masa.

  • Penutupan memastikan bahawa fn tidak kehilangan sambungan kepada pembolehubah yang wujud pada masa kelahiran fn. Ia seperti beg galas yang dibawa oleh fn ke mana sahaja ia pergi. Beg galas ini mempunyai semua pembolehubah yang terdapat dalam persekitaran tempat fn dicipta.

  • Kami tidak perlu membuat penutupan secara manual. Selain itu, kami tidak boleh mengakses pembolehubah tertutup secara eksplisit. Penutupan bukan objek JS yang ketara iaitu kita tidak boleh mencapai penutupan dan mengambil pembolehubah daripadanya. Ia adalah sifat dalaman fn. Untuk melihat beg galas, "console.dir(booker);"
    [[Skop]] akan menunjukkan kepada anda tentang VE panggilan fn ini.

  • [[]] bermaksud harta dalaman, yang tidak boleh kami akses daripada kod kami.

  • Kami sentiasa tidak perlu memulangkan fn daripada fn lain untuk membuat penutupan. Dalam contoh di bawah, pembolehubah 'f' tidak ditakrifkan di dalam fn juga, kerana ia dalam skop global. Ia juga boleh mengakses pembolehubah 'a' walaupun selepas g() telah menamatkan ECnya. 'a' berada di dalam beg galas 'f' sekarang.

let f;

const g = function(){
  const a = 23;
  f = function() {
    console.log(a*2); // 46
  };
};


const h = function(){
  const b = 777;
  f = function(){
    console.log(b*2); // 1554
  };
};

g();
f();
console.dir(f);

// f fn is reassigned using h fn. Hence, old closure value i.e 'a' will be replaced with new value 'b' which can be verified using console.dir().
h();
f();
console.dir(f);
Salin selepas log masuk
  • setTimeout(callbackFnToBeCalled, Delay);
  • Pembolehubah penutupan mempunyai keutamaan yang lebih tinggi berbanding rantai skop.
// Boarding Passengers using Closures
const boardPassengers = function(n, wait){
  const perGroup = n / 3;

  setTimeout(function(){
    console.log(`We are now boarding all ${n} passengers`);
    console.log(`There are 3 groups, each with ${perGroup} passengers`)
  }, wait*1000);

  console.log(`Will start boarding in ${wait} seconds`);
}

boardPassengers(180, 3);
Salin selepas log masuk

Atas ialah kandungan terperinci Menyahmistikan Penutupan di JS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan