hujung hadapan web
tutorial js
Penjelasan terperinci tentang kemahiran closure_javascript javascript
Penjelasan terperinci tentang kemahiran closure_javascript javascript
Selepas membaca konsep dan artikel mengenai penutupan di Internet, saya ingin menyelesaikan sendiri isu ini.
S: Apakah penutupan?
Jawapan: Penutupan bermaksud bahawa dalam JavaScript, fungsi dalaman sentiasa boleh mengakses parameter dan pembolehubah yang diisytiharkan dalam fungsi luaran di mana ia terletak, walaupun selepas fungsi luarannya dikembalikan (akhir hayat).
Ini adalah kali pertama saya menghadapi masalah penutupan
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>闭包循环问题</title>
<style type="text/css">
p {background:#ccc; width: 300px; height: 100px;}
</style>
</head>
<body>
<p id="p0">段落0</p>
<p id="p1">段落1</p>
<p id="p2">段落2</p>
<p id="p3">段落3</p>
<p id="p4">段落4</p>
<script type="text/javascript">
for( var i=0; i<5; i++ ) {
document.getElementById("p"+i).onclick=function() {
alert(i); //访问了父函数的变量i, 闭包
};
};
</script>
</body>
</html>
Jika anda tidak pernah menggunakannya sebelum ini, anda juga mungkin berfikir bahawa mengklik pada perenggan akan muncul nombor yang sepadan 0, 1, 2, 3, 4 untuk perenggan ini. Tetapi sebenarnya, mereka semua muncul 5
Terdapat banyak blog membincangkan isu ini dalam talian, dan mereka telah memberikan banyak kaedah untuk memaparkan nombor yang sepadan.
Penyelesaian 1: Simpan pembolehubah i dalam atribut perenggan yang sepadan
var pAry = document.getElementsByTagName("p");
for( var i=0; i< 5; i++ ) {
pAry[i].no = i;
pAry[i].onclick = function() {
alert(this.no);
}
};
Penyelesaian 2: Tambah lapisan penutup, dan hantar i ke fungsi dalaman dalam bentuk parameter fungsi
var pAry = document.getElementsByTagName("p");
for( var i=0; i< 5; i++ ) {
pAry[i].no = i;
pAry[i].onclick = function() {
alert(this.no);
}
};
Mengenai masalah penutupan yang disebabkan oleh ini, pepatah di Internet ialah "pembolehubah i disimpan dalam fungsi sebagai penunjuk atau alamat pembolehubah" dengan baik, semuanya berkaitan dengan penunjuk. . . . Kemudian teroka lagi.
Teroka 1, nilai yang dikembalikan ialah 10 bukannya
(function test() {
var temp =10;
for(var i=0; i< 5; i++ ){
document.getElementById("p"+i).onclick=function() {
alert(temp); //访问了父函数的变量temp, 闭包
}
};
temp=20;
})();
Teroka 2, kembali 10 sekali, dan kemudian kembali 20
(function test() {
var temp =10;
for( var i=0; i< 5; i++ ) {
document.getElementById("p"+i).onclick=function() {
alert(temp); //访问了父函数的变量i, 闭包
}
if(i===1){
alert(temp);
}
};
temp=20;
})();
Daripada penerokaan 1 dan 2, dapat disimpulkan bahawa jika pembolehubah yang sama tahap dengan fungsi itu diakses di dalam fungsi, maka pembolehubah itu bermastautin dalam ingatan. Mengakses pembolehubah ini pada asasnya mengakses alamat pembolehubah
Kemudian, saya membaca artikel lain tentang "objek ini dalam penutupan JS", mari kita terus membincangkan isu ini.
// js闭包this对象1
var name = 'The Window';
var object = {
name : 'My Object',
getNameFunc1 : function(){
// return this.name;
console.log(this);//object
return function(){//闭包，访问的便是全局变量的了，this指windows
console.log(this);//windows
return this.name; //The Window
}
},
getNameFunc2 : function(){
return this.name;//访问的是object
},
aa:function(){
alert(22);
}
};
alert(object.getNameFunc1()());//弹出“The Window”
Soalan: Jadi mengapa fungsi tanpa nama tidak mendapat objek ini yang mengandungi skopnya?
Jawapan: Setiap fungsi secara automatik memperoleh dua pembolehubah khas apabila ia dipanggil: ini dan argumen. Apabila mencari kedua-dua pembolehubah ini, fungsi dalaman mengarahkan carian ke objek aktifnya, jadi tidak mungkin untuk mengakses terus kedua-dua pembolehubah ini dalam fungsi luar.
Tetapi ini boleh dilakukan dengan kod berikut (akses terus kepada pembolehubah dalam fungsi luaran):
// js闭包this对象2
var name = 'The Window';
var object = {
name : 'My Object',
getNameFunc : function(){
var that = this;
console.log(this);//输出的是object
return function(){
console.log(this);//输出的仍然是Windows
return that.name;
};
}
};
alert(object.getNameFunc()());//弹出“My Object”
Perbezaannya ialah objek ini diperuntukkan kepada pembolehubah itu Walaupun selepas fungsi kembali, itu masih merujuk kepada objek, jadi objek akan dikembalikan.
Saya telah menulis begitu banyak tentang penutupan, jadi izinkan saya menyebut kegunaan penutupan; jika tidak, ia akan menjadi orang yang tidak baik untuk terus bermain-main dengan penutupan.
Lihat contoh penutupan biasa ini:
function A(){
var a=1;
function B(){
return a;
};
return B;
};
var C=A();//C取得A的子作用域B的访问接口
console.log(C());//1 C能访问到B的父级作用域中的变量a
Selagi skop lain boleh mendapatkan antara muka akses skop kanak-kanak, maka skop lain akan mempunyai cara untuk mengakses pembolehubah skop induk skop kanak-kanak. Dalam kes ini, ia akan sangat berguna jika anda perlu mengakses nilai dalam fungsi tertentu pada masa hadapan.
Banyak kod di atas sebenarnya ditemui dalam talian Saya hanya meringkaskan apa yang saya faham dan proses membaca.
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Apakah maksud penutupan dalam ungkapan lambda C++?
Apr 17, 2024 pm 06:15 PM
Dalam C++, penutupan ialah ungkapan lambda yang boleh mengakses pembolehubah luaran. Untuk membuat penutupan, tangkap pembolehubah luar dalam ungkapan lambda. Penutupan memberikan kelebihan seperti kebolehgunaan semula, penyembunyian maklumat dan penilaian malas. Ia berguna dalam situasi dunia sebenar seperti pengendali acara, di mana penutupan masih boleh mengakses pembolehubah luar walaupun ia dimusnahkan.
Bagaimana untuk melaksanakan penutupan dalam ungkapan C++ Lambda?
Jun 01, 2024 pm 05:50 PM
Ungkapan C++ Lambda menyokong penutupan, yang menyimpan pembolehubah skop fungsi dan menjadikannya boleh diakses oleh fungsi. Sintaks ialah [capture-list](parameters)->return-type{function-body}. capture-list mentakrifkan pembolehubah untuk ditangkap Anda boleh menggunakan [=] untuk menangkap semua pembolehubah tempatan mengikut nilai, [&] untuk menangkap semua pembolehubah tempatan melalui rujukan, atau [variable1, variable2,...] untuk menangkap pembolehubah tertentu. Ungkapan Lambda hanya boleh mengakses pembolehubah yang ditangkap tetapi tidak boleh mengubah suai nilai asal.
Apakah kelebihan dan kekurangan penutupan dalam fungsi C++?
Apr 25, 2024 pm 01:33 PM
Penutupan ialah fungsi bersarang yang boleh mengakses pembolehubah dalam skop fungsi luar Kelebihannya termasuk pengkapsulan data, pengekalan keadaan dan fleksibiliti. Kelemahan termasuk penggunaan memori, kesan prestasi dan kerumitan penyahpepijatan. Selain itu, penutupan boleh mencipta fungsi tanpa nama dan menyerahkannya kepada fungsi lain sebagai panggilan balik atau hujah.
Selesaikan masalah kebocoran memori yang disebabkan oleh penutupan
Feb 18, 2024 pm 03:20 PM
Tajuk: Kebocoran memori disebabkan oleh penutupan dan penyelesaian Pengenalan: Penutupan ialah konsep yang sangat biasa dalam JavaScript, yang membenarkan fungsi dalaman mengakses pembolehubah fungsi luaran. Walau bagaimanapun, penutupan boleh menyebabkan kebocoran memori jika digunakan secara tidak betul. Artikel ini akan meneroka masalah kebocoran memori yang disebabkan oleh penutupan dan menyediakan penyelesaian serta contoh kod khusus. 1. Kebocoran memori disebabkan oleh penutupan Ciri penutupan ialah fungsi dalaman boleh mengakses pembolehubah fungsi luaran, yang bermaksud pembolehubah yang dirujuk dalam penutupan tidak akan dikumpul sampah. Jika digunakan secara tidak betul,
Kesan penunjuk fungsi dan penutupan pada prestasi Golang
Apr 15, 2024 am 10:36 AM
Kesan penunjuk fungsi dan penutupan pada prestasi Go adalah seperti berikut: Penunjuk fungsi: Lebih perlahan sedikit daripada panggilan langsung, tetapi meningkatkan kebolehbacaan dan kebolehgunaan semula. Penutupan: Biasanya lebih perlahan, tetapi merangkumi data dan tingkah laku. Kes praktikal: Penunjuk fungsi boleh mengoptimumkan algoritma pengisihan dan penutupan boleh mencipta pengendali acara, tetapi ia akan membawa kerugian prestasi.
Bagaimanakah penutupan dilaksanakan di Jawa?
May 03, 2024 pm 12:48 PM
Penutupan dalam Java membenarkan fungsi dalaman mengakses pembolehubah skop luar walaupun fungsi luar telah keluar. Dilaksanakan melalui kelas dalaman tanpa nama, kelas dalam memegang rujukan kepada kelas luar dan memastikan pembolehubah luar aktif. Penutupan meningkatkan fleksibiliti kod, tetapi anda perlu sedar tentang risiko kebocoran memori kerana rujukan kepada pembolehubah luaran oleh kelas dalaman tanpa nama memastikan pembolehubah tersebut hidup.
Panggilan berantai dan penutupan fungsi PHP
Apr 13, 2024 am 11:18 AM
Ya, kesederhanaan dan kebolehbacaan kod boleh dioptimumkan melalui panggilan berantai dan penutupan: panggilan berantai memaut fungsi panggilan ke antara muka yang lancar. Penutupan mewujudkan blok kod yang boleh digunakan semula dan pembolehubah akses di luar fungsi.
Peranan penutupan fungsi golang dalam pengujian
Apr 24, 2024 am 08:54 AM
Penutupan fungsi bahasa Go memainkan peranan penting dalam ujian unit: Menangkap nilai: Penutupan boleh mengakses pembolehubah dalam skop luar, membenarkan parameter ujian ditangkap dan digunakan semula dalam fungsi bersarang. Permudahkan kod ujian: Dengan menangkap nilai, penutupan memudahkan kod ujian dengan menghapuskan keperluan untuk menetapkan parameter berulang kali untuk setiap gelung. Tingkatkan kebolehbacaan: Gunakan penutupan untuk mengatur logik ujian, menjadikan kod ujian lebih jelas dan lebih mudah dibaca.
