Penutupan JavaScript
Apakah penutupan
Penutupan, penjelasan rasmi penutupan ialah: pembolehubah dengan banyak pembolehubah dan An ungkapan (biasanya fungsi) persekitaran di mana pembolehubah ini terikat, supaya pembolehubah ini adalah sebahagian daripada ungkapan. Ciri-ciri penutupan:
1. Sebagai rujukan kepada pembolehubah fungsi, ia diaktifkan apabila fungsi itu kembali.
2. Penutupan ialah kawasan tindanan yang tidak melepaskan sumber apabila fungsi kembali.
Ringkasnya, Javascript membenarkan penggunaan fungsi dalaman---iaitu, definisi fungsi dan ungkapan fungsi terletak dalam badan fungsi fungsi lain. Tambahan pula, fungsi dalaman ini mempunyai akses kepada semua pembolehubah tempatan, parameter dan fungsi dalaman lain yang diisytiharkan dalam fungsi luar di mana ia wujud. Penutupan terbentuk apabila salah satu fungsi dalaman sedemikian dipanggil di luar fungsi luar yang mengandunginya.
2. Beberapa cara untuk menulis dan menggunakan penutup
Pertama sekali, anda mesti faham bahawa segala-galanya dalam JS ialah objek, dan fungsi ialah sejenis objek. Mari kita lihat lima cara untuk menulis penutup dan fahami secara ringkas apa itu penutupan. Ini akan diterangkan secara terperinci kemudian.
//Cara penulisan pertama
function Circle(r) {
this.r = r;
}
Circle.PI = 3.14159;
Circle.prototype.area = function() {
return Circle.PI * this.r * this.r;
}
var c = new Circle(1.0);
alert(c.area());Tiada apa-apa yang istimewa tentang cara penulisan ini, ia hanya menambah beberapa atribut pada fungsi.
//Cara penulisan kedua
var Circle = function() {
var obj = new Object();
obj.PI = 3.14159;
obj.area = function( r ) {
return this.PI * r * r;
}
return obj;
}
var c = new Circle();
alert( c.area( 1.0 ) );Cara penulisan ini adalah untuk mengisytiharkan pembolehubah dan menetapkan fungsi sebagai nilai kepada pembolehubah.
//Cara penulisan ketiga
var Circle = new Object();
Circle.PI = 3.14159;
Circle.Area = function( r ) {
return this.PI * r * r;
}
alert( Circle.Area( 1.0 ) );Kaedah ini paling mudah difahami, iaitu mencipta objek baharu dan kemudian menambah sifat dan kaedah pada objek tersebut.
//Cara penulisan ke-4
var Circle={
"PI":3.14159,
"area":function(r){
return this.PI * r * r;
}
};
alert( Circle.area(1.0) );Kaedah ini biasa digunakan dan paling mudah. var obj = {} mengisytiharkan objek kosong.
//Cara penulisan kelima
var Circle = new Function("this.PI = 3.14159;this.area = function( r ) {return r*r*this.PI; } ");
alert( (Bulatan baharu()).kawasan(1.0) );
Sejujurnya, saya tidak pernah menggunakan kaedah penulisan ini. Anda boleh Untuk rujukan.
Secara umumnya, antara kaedah di atas, kaedah ke-2 dan ke-4 adalah lebih biasa, dan anda boleh memilih mengikut tabiat anda.
Prototaip yang biasa digunakan dalam JS muncul dalam kod di atas, jadi apakah kegunaan prototaip? Mari kita lihat:
var dom = function(){
};
dom.Show = function(){
alert("Show Message");
};
dom.prototype.Display = function(){
alert("Property Message");
};
dom.Display(); //error
dom.Show();
var d = new dom();
d.Display();
d.Show(); //errorKitaran hayat pembolehubah
Skop pembolehubah global adalah global, iaitu, sepanjang keseluruhan program JavaScript , pembolehubah global ada di mana-mana.
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 jika anda ingin mengira beberapa nilai, dan pembilang tersedia dalam semua fungsi.
Anda boleh menggunakan pembolehubah global dan fungsi untuk menetapkan kenaikan pembilang:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>全局变量计数。</p>
<button type="button" onclick="myFunction()">计数!</button>
<p id="demo">0</p>
<script>
var counter = 0;
function add() {
return counter += 1;
}
function myFunction(){
document.getElementById("demo").innerHTML = add();
}
</script>
</body>
</html>Nilai pembilang berubah apabila fungsi tambah() dilaksanakan.
Tetapi inilah masalahnya, mana-mana skrip pada halaman boleh menukar kaunter, walaupun fungsi add() tidak dipanggil.
Jika saya mengisytiharkan pembilang dalam fungsi, nilai pembilang tidak boleh diubah suai tanpa memanggil fungsi:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>局部变量计数。</p>
<button type="button" onclick="myFunction()">计数!</button>
<p id="demo">0</p>
<script>
function add() {
var counter = 0;
return counter += 1;
}
function myFunction(){
document.getElementById("demo").innerHTML = add();
}
</script>
</body>
</html>Kod di atas tidak akan dikeluarkan dengan betul, setiap kali saya memanggil add( ) fungsi, kaunter akan Tetapkan kepada 1.
Fungsi terbina dalam JavaScript boleh menyelesaikan masalah ini.
Fungsi terbina dalam JavaScript
Semua fungsi boleh mengakses pembolehubah global.
Malah, dalam JavaScript, semua fungsi boleh mengakses skop di atasnya.
JavaScript menyokong fungsi bersarang. Fungsi bersarang boleh mengakses pembolehubah fungsi peringkat atas.
Dalam contoh ini, fungsi tertanam plus() boleh mengakses pembolehubah pembilang bagi fungsi induk:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>局部变量计数。</p>
<p id="demo">0</p>
<script>
document.getElementById("demo").innerHTML = add();
function add() {
var counter = 0;
function plus() {counter += 1;}
plus();
return counter;
}
</script>
</body>
</html>Jika kita boleh mengakses fungsi tambah() secara luaran, ini boleh menyelesaikan dilema balas .
Kita juga perlu memastikan bahawa kaunter = 0 hanya dilaksanakan sekali.
Kami memerlukan penutupan.
bahagian seterusnya