penutupan JavaScript
Pembolehubah JavaScript boleh menjadi pembolehubah tempatan atau pembolehubah global.
Pembolehubah peribadi boleh menggunakan penutupan.
Pembolehubah global
Fungsi boleh mengakses pembolehubah yang ditakrifkan dalam fungsi, seperti:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>访问函数内部定义的变量:</p>
<button type="button" onclick="myFunction()">查看</button>
<p id="demo"></p>
<script>
function myFunction() {
var a = 4;
document.getElementById("demo").innerHTML = a * a;
}
</script>
</body>
</html>Jalankan program dan cuba it out
Fungsi ini juga boleh mengakses pembolehubah yang ditakrifkan di luar fungsi, seperti:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>函数可以访问定义在函数外的变量：</p>
<button type="button" onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
var a = 5;
function myFunction() {
document.getElementById("demo").innerHTML = a * a;
}
</script>
</body>
</html>Jalankan atur cara dan cuba
Dalam yang terakhir contoh, a ialah pembolehubah global.
Pembolehubah global dalam halaman web tergolong dalam objek tetingkap.
Pembolehubah global digunakan pada semua skrip pada halaman.
Dalam contoh pertama, a ialah pembolehubah setempat.
Pembolehubah setempat hanya boleh digunakan di dalam fungsi yang ditakrifkan. Tidak tersedia untuk fungsi lain atau kod skrip.
Walaupun pembolehubah global dan tempatan mempunyai nama yang sama, ia adalah dua pembolehubah yang berbeza. Mengubah suai satu tidak akan menjejaskan nilai yang lain.
Petua: Jika pembolehubah diisytiharkan tanpa menggunakan kata kunci var, ia adalah pembolehubah global, walaupun ia ditakrifkan dalam fungsi.
Kitaran hayat pembolehubah
Skop pembolehubah global adalah global, iaitu, dalam keseluruhan program JavaScript, pembolehubah global adalah di mana-mana Semua ada.
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 balas:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</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>Jalankan program untuk mencuba ia
Nilai pembilang berubah apabila fungsi add() dilaksanakan.
Tetapi inilah masalahnya, mana-mana skrip pada halaman boleh menukar kaunter, walaupun fungsi add() tidak dipanggil.
Jika saya mengisytiharkan pembilang di dalam fungsi, nilai pembilang tidak boleh diubah suai tanpa memanggil fungsi:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</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>Jalankan atur cara untuk mencubanya
Kod di atas tidak akan dikeluarkan dengan betul, setiap kali saya memanggil fungsi add(), pembilang akan ditetapkan 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 terbenam plus() boleh mengakses pemboleh ubah pembilang bagi fungsi induk:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</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>
</htmlJalankan atur cara dan cuba
Jika kita boleh mengaksesnya secara luaran tambah() fungsi, yang boleh menyelesaikan dilema kaunter.
Kita juga perlu memastikan bahawa kaunter = 0 hanya dilaksanakan sekali.
Kami memerlukan penutupan.
Penutupan JavaScript
Ingat fungsi memanggil dirinya sendiri? Apakah fungsi ini?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>局部变量计数。</p>
<button type="button" onclick="myFunction()">计数!</button>
<p id="demo">0</p>
<script>
var add = (function () {
var counter = 0;
return function () {return counter += 1;}
})();
function myFunction(){
document.getElementById("demo").innerHTML = add();
}
</script>
</body>
</html>Jalankan atur cara dan cuba
Analisis contoh
Tambah pembolehubah menentukan perkataan pulangan bagi nilai panggilan kendiri fungsi.
Fungsi panggilan kendiri hanya dilaksanakan sekali. Tetapkan pembilang kepada 0. dan mengembalikan ungkapan fungsi.
tambah pembolehubah boleh digunakan sebagai fungsi. Bahagian yang menarik ialah ia memberikan akses kepada pembilang dari skop di atas fungsi.
Ini dipanggil penutupan JavaScript. Ia membolehkan fungsi mempunyai pembolehubah persendirian.
Kaunter dilindungi oleh skop fungsi tanpa nama dan hanya boleh diubah suai melalui kaedah tambah.
Petua: Penutupan ialah fungsi yang boleh mengakses pembolehubah dalam skop fungsi peringkat atas, walaupun fungsi peringkat atas telah ditutup.
![Projek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Kursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutorial bahagian hadapan WEB [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Aplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
