Penjelasan terperinci tentang penutupan Javascript (Penutupan)_kemahiran javascript

Berikut ialah nota kajian saya, yang sepatutnya sangat berguna untuk pemula Javascript.

1. Skop pembolehubah

Untuk memahami penutupan, anda mesti memahami skop pembolehubah khas Javascript terlebih dahulu.

Skop pembolehubah tidak lebih daripada dua jenis: pembolehubah global dan pembolehubah tempatan.

Perkara istimewa tentang bahasa Javascript ialah pembolehubah global boleh dibaca terus di dalam fungsi.

var n=999;

function f1(){
　　alert(n);
}

f1(); // 999

Sebaliknya, pembolehubah tempatan dalam fungsi tidak boleh dibaca di luar fungsi.

function f1(){
　　var n=999;
}

alert(n); // error

Ada sesuatu yang perlu diperhatikan di sini Apabila mengisytiharkan pembolehubah di dalam fungsi, anda mesti menggunakan arahan var. Jika anda tidak menggunakannya, anda sebenarnya mengisytiharkan pembolehubah global!

function f1(){
　　n=999;
}

f1();

alert(n); // 999

2. Bagaimana cara membaca pembolehubah tempatan dari luar?

Atas pelbagai sebab, kadangkala kita perlu mendapatkan pembolehubah setempat dalam sesuatu fungsi. Walau bagaimanapun, seperti yang dinyatakan sebelum ini, ini tidak boleh dilakukan dalam keadaan biasa dan hanya boleh dicapai melalui penyelesaian.

Iaitu untuk menentukan fungsi lain di dalam fungsi.

function f1(){

　　var n=999;

　　function f2(){
　　　　alert(n); // 999
　　}

}

Dalam kod di atas, fungsi f2 disertakan di dalam fungsi f1 Pada masa ini, semua pembolehubah tempatan di dalam f1 kelihatan kepada f2. Tetapi sebaliknya tidak berfungsi Pembolehubah tempatan di dalam f2 tidak dapat dilihat oleh f1. Ini ialah struktur "skop rantaian" yang unik untuk bahasa Javascript Objek anak akan mencari pembolehubah semua objek induk peringkat demi tahap. Oleh itu, semua pembolehubah objek induk kelihatan kepada objek anak, tetapi tidak sebaliknya.

Memandangkan f2 boleh membaca pembolehubah tempatan dalam f1, maka selagi f2 digunakan sebagai nilai pulangan, tidakkah kita boleh membaca pembolehubah dalamannya di luar f1?

function f1(){

　　var n=999;

　　function f2(){
　　　　alert(n); 
　　}

　　return f2;

}

var result=f1();

result(); // 999

3. Konsep penutupan

Fungsi f2 dalam kod di bahagian sebelumnya ialah penutupan.

Takrifan "penutupan" dalam pelbagai kesusasteraan profesional adalah sangat abstrak dan sukar untuk difahami. Pemahaman saya ialah penutupan ialah fungsi yang boleh membaca pembolehubah dalaman fungsi lain.

Memandangkan dalam bahasa Javascript, hanya sub-fungsi di dalam fungsi boleh membaca pembolehubah setempat, penutupan boleh difahami secara ringkas sebagai "fungsi yang ditakrifkan dalam fungsi".

Jadi, pada dasarnya, penutupan ialah jambatan yang menghubungkan bahagian dalam fungsi dengan bahagian luar fungsi.

4. Tujuan penutupan

Penutupan boleh digunakan di banyak tempat. Kegunaan terbesarnya ialah dua untuk membaca pembolehubah di dalam fungsi seperti yang dinyatakan sebelum ini, dan yang lain adalah untuk menyimpan nilai pembolehubah ini dalam ingatan.

Bagaimana untuk memahami ayat ini? Sila lihat kod di bawah.

  function f1(){

　　　　var n=999;

　　　　nAdd=function(){n+=1}

　　　　function f2(){
　　　　　　alert(n);
　　　　}

　　　　return f2;

　　}

　　var result=f1();

　　result(); // 999

　　nAdd();

　　result(); // 1000

Dalam kod ini, hasilnya sebenarnya ialah fungsi penutupan f2. Ia dijalankan dua kali, kali pertama nilainya ialah 999, kali kedua nilainya ialah 1000. Ini membuktikan bahawa pembolehubah tempatan n dalam fungsi f1 sentiasa disimpan dalam ingatan dan tidak dikosongkan secara automatik selepas f1 dipanggil.

Mengapa ini berlaku? Sebabnya ialah f1 ialah fungsi induk bagi f2, dan f2 diberikan kepada pembolehubah global, yang menyebabkan f2 sentiasa berada dalam ingatan, dan kewujudan f2 bergantung pada f1, jadi f1 sentiasa dalam ingatan dan tidak akan dipadamkan. selepas panggilan selesai , dikitar semula oleh mekanisme kutipan sampah (kutipan sampah).

Perkara lain yang perlu diberi perhatian dalam kod ini ialah baris "nAdd=function(){n =1}". Pertama sekali, kata kunci var tidak digunakan sebelum nAdd, jadi nAdd ialah pembolehubah global, bukan pembolehubah setempat. pembolehubah. Kedua, nilai nAdd ialah fungsi tanpa nama, dan fungsi tanpa nama itu sendiri juga merupakan penutup, jadi nAdd adalah bersamaan dengan penetap, yang boleh beroperasi pada pembolehubah tempatan di dalam fungsi di luar fungsi.

5 perkara yang perlu diambil perhatian apabila menggunakan penutupan

1) Memandangkan penutupan akan menyebabkan pembolehubah dalam fungsi disimpan dalam memori, yang menggunakan banyak memori, penutupan tidak boleh disalahgunakan, jika tidak, ia akan menyebabkan masalah prestasi pada halaman web, dan boleh menyebabkan kebocoran memori dalam IE. Penyelesaiannya adalah untuk memadam semua pembolehubah tempatan yang tidak digunakan sebelum keluar dari fungsi.

2) Penutupan akan menukar nilai pembolehubah di dalam fungsi induk di luar fungsi induk. Oleh itu, jika anda menggunakan fungsi induk sebagai objek, penutupan sebagai kaedah awamnya dan pembolehubah dalaman sebagai nilai peribadinya, anda mesti berhati-hati untuk tidak mengubah nilai pembolehubah di dalam fungsi induk.

6. Soalan

Jika anda boleh memahami keputusan dua keping kod berikut, anda harus memahami mekanisme operasi penutupan.

Coretan Kod 1

  var name = "The Window";

　　var object = {
　　　　name : "My Object",

　　　　getNameFunc : function(){
　　　　　　return function(){
　　　　　　　　return this.name;
　　　　　　};

　　　　}

　　};

　　alert(object.getNameFunc()());

Coretan kod 2

  var name = "The Window";

　　var object = {
　　　　name : "My Object",

　　　　getNameFunc : function(){
　　　　　　var that = this;
　　　　　　return function(){
　　　　　　　　return that.name;
　　　　　　};

　　　　}

　　};

　　alert(object.getNameFunc()());　  

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.