Bercakap tentang kemahiran closure_javascript javascript

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

1. Skop pembolehubah
Untuk memahami penutupan, anda mesti terlebih dahulu memahami skop pembolehubah khas JavaScript.
Tidak ada lebih daripada dua skop pembolehubah: 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, 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.
Oleh kerana dalam bahasa Javascript, hanya subfungsi dalam fungsi boleh membaca pembolehubah tempatan, penutupan boleh difahami secara ringkas sebagai "fungsi yang ditakrifkan dalam fungsi."
Jadi, pada dasarnya, penutupan adalah 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).
Satu lagi perkara yang patut diberi perhatian dalam kod ini ialah baris "nAdd=function(){n =1}". Pertama, kata kunci var tidak digunakan sebelum nAdd, jadi nAdd ialah pembolehubah global, bukan pembolehubah tempatan. 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. Penyelesaian adalah untuk memadam semua pembolehubah tempatan yang tidak digunakan sebelum keluar dari fungsi.
2) Penutupan akan mengubah 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()()); 

Seperkara lagi ialah bagaimana ini berfungsi dalam javascript?

var fullname = ‘John Doe'; 
var obj = { 
fullname: ‘Colin Ihrig', 
prop: { 
fullname: ‘Aurelio De Rosa', 
getFullname: function() { 
return this.fullname; 
} 
} 
};

console.log(obj.prop.getFullname());

var test = obj.prop.getFullname;

console.log(test());

Jawapan
Jawapannya ialah Aurelio De Rosa dan John Doe. Sebabnya ialah dalam sesuatu fungsi, kelakuan ini bergantung pada cara fungsi JavaScript dipanggil dan ditakrifkan, bukan hanya bagaimana ia ditakrifkan.
Dalam panggilan console.log() pertama, getFullname() dipanggil sebagai fungsi objek obj.prop. Oleh itu, konteks merujuk kepada yang terakhir, dan fungsi mengembalikan nama penuh objek. Sebaliknya, apabila getFullname() diberikan kepada pembolehubah ujian, konteks merujuk kepada objek global (tetingkap). Ini kerana ujian ditetapkan secara tersirat sebagai sifat objek global. Atas sebab ini, fungsi mengembalikan nama penuh tetingkap, iaitu nilai yang ditakrifkan pada baris pertama.

Di atas ialah keseluruhan kandungan artikel ini, saya harap ia akan membantu semua orang untuk memahami penutupan JavaScript sekali lagi.